Daily CSS Images Portfolio Template
When I created Daily CSS Images, one of the key benefits I imagined was people being able to showcase their work at the end.
To make this easy, I decided to create a portfolio template where you can insert images and links to all your pens made throughout the challenge.
Not only will this be a great, easy way to make a portfolio, but it will allow you to track your progress during the challenge, and hopefully, give you an enthusiasm to finish.
All you have to do is fork the original pen, update your name, insert your thoughts from each week, and replace the images with images of your pure CSS images. You can also insert links to all of your pens if you’d like.
I’m guessing some people may know just how to do that and rush to fork it now. However, I want to make sure I left documentation if it isn’t so obvious to you (and that’s ok).
Portfolio Documentation
- First go to the original pen, if you haven’t already, and click fork.
2. Update your name which is between the H1 tag under intro-header. You can also update the description as well if you’d like.
3. Take a screenshot of your CSS image for the day.
4. Get a URL for your screenshot.
I got my URL by uploading an image to my Codepen assets and copy and pasted the generated URL.
I was able to do this since I have a Pro account. Full disclosure, this is not a sponsored post, but I sincerely recommend that you get a Pro account so you can upload your own images and get a URL to put right between your src. I am aware of alternatives, but I like having full control without leaving the editor. I also really like the other features the Pro account offers.
If you do not have a Pro account, you will need to find an alternative to getting your image to a URL.
4. Locate the first thumbnail in the week 1 row which is under the first content-section-a. You should see an img tag that has a URL between src.
5. Replace the URL between the SRC tag with the URL for your image.
6. Repeat steps 3–5 daily until you finish the challenge.
Deploying Your Portfolio
Once you reach the end of the challenge and have filled out your portfolio, you can easily deploy your site using Amazon Web Services.
All you can to do is hit export in the Codepen editor.
This will download a zip file.
Now go to AWS and sign in or create an account.
On your dashboard, you should see an option to Host a static website.
Click on this option which will pull up a very easy walkthrough to deploy your site.
The walkthrough will be self-explanatory. You will just need to upload your zip file that was exported from Codepen and specify a domain and AWS handles the rest.
If you don’t have a domain, you can grab one during the walkthrough using AWS’ Route 53. When I did this, I bought the domain during the walkthrough and just waited about 30 mins until it was processed. I then specified that domain for the zip file of my code I exported.
Got Questions?
Leave a comment below, email us at hello@dailycssimages.com, or tweet @dailycssimages.
