I used the Codepen Design Asset from Unsplash today on a little self-made web development project. I’m still trying to decide if this blog with be strictly tech or what. I think I am going to do a mix of my life for now, but here is a little tech project I made. This is what I used to make this project: HTML, CSS, SVGs for the background from Hero Patterns, and of course…the Codepen Design Asset from Unsplash.
I started on this project out of the blue. I was looking for fall themed stock photos from Unsplash. Unsplash is one of my favorite stock photo companies. The photos are free to use and the photographers on the site are very talented, so you will always find a great photo on there for social media, blogs, newsletters, etc.
While I was perusing the stock photo website, I decided to look on their API/Developer page and see what kind of treats they had on there. Unsplash has been integrated in a bunch of websites and apps. That makes the site even more convenient to use. I clicked on their Codepen link and found out that they were integrated into Codepen’s Design Assets.
Using the design assets in Codepen is super easy. They can be used in any project. For this project. I made a basic webpage with HTML and CSS to showcase how you can use the Unsplash asset. All you have to do is click the “Asset” button at the bottom of your pen. Then click on the photos asset.
From there you can either click one of the photos that is already there, or you can use the search bar to find what you want. For the example below, I typed in “Flower” and “Waves” When you find the picture that you want, you simply click on it, and then copy the code for whatever version/size of the photo you want. I chose small, so it would fit in the white box on the page.
That’s it. That’s all. It really was very simple. I plan on playing around with the other design assets whenever I work on a project in Codepen soon.
See the Pen Playing with Codepen Design Asset Unsplash by CoderJai (@JaiMarshall) on CodePen.
Photo from my totally awesome Codepen. Follow me @CoderJai on Codepen.