Daily CSS Images (Everything You Need to Know)

Published in

Coding Artist

9 min readFeb 21, 2017

The Briefing

What is it? A 50 day email challenge for making pure CSS images.
How much is it? 100% free.
How do I sign up? ~Sign up for free here.~ This email challenge is no longer available.

Update (3/14/17): Added a 100% free video course to go along with the challenge.

How It Began

With the start of a new year, and all the goals and aspirations that come with it, and wonderful challenges like #100daysofcode, we are in the midst of an exciting time to start coding. Before the new year, I committed to #100daysofcode to pursue a completion of freeCodeCamp as well as a commitment to one major side project.

I always have ideas for side projects to work on, that’s never been an issue. The issue is always how can I find something to work on that is manageable, fun, and helpful to others. So I started thinking.

I started to think back on 2016 and my coding accomplishments. My main accomplishment was being consistent in contributing to Codepen and finally starting to feel really confident in front-end development.

I loved working on front-end development because there were visual results to what I was coding, and it was always exciting to work on in my spare time. Also, because I was posting what I was making on Codepen, there was the fun challenge of trying to get on the front page. In short, I found it most manageable and fun to learn to code when I was able to see visual results.

When I first started Codepen, I always remember seeing pure CSS images and thinking how cool they were….but I had no idea how these people were making them. Until one day, I told myself I would create one before the day ended, and I did.

I created a World Series Cubs ticket purely CSS, and I was ecstatic. It was such an amazing experience because I remember thinking “I just made a vector graphic completely with code.”

I loved it so much that I started to make more and more. Eventually, by the end of 2016, I had also made a GameBoy, a Slack Channel UI Card, the Codepen editor, a Pokedex, Frankenstein, and more.

Not only was I having the instant visual results that I loved, but I was actually getting really confident in CSS. While I was making these pure CSS images, I started to get familiar with Bootstrap to make landing pages and eventually full websites.

More than I ever thought it could, making images with purely CSS was transferring over to other areas that I wanted to learn. To be honest, it has even helped me with single page applications I am coding with Vue.js. Why? Because you start to see everything in components and you learn to master one component at a time.

Creating pure CSS images is simply a complex image and breaking it down into small components and putting it all together.

I mention all of this because I’m sure there are people who want to experience the rush of excitement to learn what they want to learn in a way that is manageable and fun. And if you’re like me, you might have one heck of a time achieving that rush by making awesome pure CSS images.

All of what I have just described are reflections of thoughts that were circulating in my mind when I was trying to finally pick that side project I couldn’t decide on.

I finally found something that would be manageable, fun, and helpful for others, a 50-day email challenge where you are prompted with an image to create with CSS.

How It Works

Now that you have the background as to why I created Daily CSS Images, I want to go into more detail about how it works.

Email to Your Inbox

After subscribing, you will be sent a confirmation email as well as a welcome email with some resources to get your feet wet in making pure CSS images.

Each weekday, you will then receive a short written prompt that tells you what to make in purely CSS for that day. Here’s an example:

You continue to receive an email challenge each weekday over a 50 day period. Each week will a certain theme to keep things fun and engaging.

Create the Image

Once you are ready to create the image for the day, you will head over to Codepen.io, which is a front-end playground and also a great community where you can show and tell what you make, and code your image.

If you get stuck when trying to create your first image, remember to reference the articles provided in the welcome email (which you can access right here on Medium). You can also search #dailycssimages to see other coded images which you can reference for help or use as inspiration. Make sure to use #dailycssimages in the title of your pen.

Get Creative

Although the prompts are pretty simple and straight-forward. Use this challenge as a way to become more creative. Think about how you can develop a personal design style or trademark. Let the web be your canvas and push yourself to think outside the box.

Share the Image

Once you create the image in Codepen, share it via Twitter and use the hashtag #dailycssimages.

Full disclosure, I personally retweet, like, and respond to each Tweet when I can. I intentionally did not automate this to give you genuine feedback. Not only will you get a chance to show your work and get feedback from me, but you will also be able to get feedback from all your fellow Daily CSS Images participants.

Save Your Images

I highly encourage you to save all your images to your own Codepen collection. By the end of the journey, you will have a sweet portfolio of CSS images which you can showcase as you like.

Make the Best of the Best

First, if you are using Codepen, you have the chance your pen being selected to front page which is great motivation.

Second, the best images from each week will be placed on an exclusive Codepen collection and sent to all of our participants. It’s more motivation and a way to promote your work.

Encourage Others

As I mentioned earlier, you have the chance to get feedback on your work. I would strongly encourage that you make an effort to give feedback to others just as you would like feedback on your own work. This really makes the experience better for everyone and helps shape this into a community.

Fill Out Your Portfolio

To make things easy, we created a portfolio template so you can track your progress along the journey and create a nice portfolio by the end.

All you have to do is fork the pen, edit the name, insert your thoughts from each week, and update the thumbnail placeholders with your own images.

If you need help, there’s a detailed guide on how to get started using the portfolio template here.

Ways to Stay Accountable

Create a log and keep track. Write down how it went, save links to your work, and share future goals.
Reach out to other participants. Find other participants and start a Twitter list or Facebook group chat. Whatever means you use, find a way to work towards completion as a team.
Share your progress on Twitter each weekday, even if you don’t finish a challenge.
Really short on time? Don’t let that stop you. Create an email folder and do what you can at a manageable pace (though I’d encourage you to at least try to complete 1 per weekday if you can).
Have other ideas? Drop them in the comments.

Subscribe Today

Let’s take you there.

FAQ

Since launching, I have had some reoccurring questions that might be best to assemble in a FAQ.

Is everyone on the same day of the challenge?

A. No. Day 1 of the challenge starts on the first weekday after subscription. For example, if Mark subscribed on a Monday, he will be on Day 2 on Tuesday. If Jerry subscribed on Tuesday, he will be on Day 1 on Tuesday.

2. Is it just animals?

A. No. After the first four days of the challenge, I have seen people ask if the challenge is only animals. Each week has a particular theme. The first 5 weekdays are animals, then it will switch. By the end, you will do 10 different topics.

3. Am I penalized for not staying on track?

A. No. You are not penalized if you want to push back what day you start or if you want to do multiple ones at the end of the week to catch up. However, I’d encourage you to stick to the schedule as best as you can.

4. If I can’t do it every day should I still do the challenge?

A. Yes. You can create a folder in your email and save all the challenges and go at your own pace. You can aim to do only one of the challenges per week in 50 weekdays or do everyone at a pace of one per week for an extended length of time. Again, I encourage you to try to stick to the schedule of five weekdays if possible.

5. Is there a guide for each challenge?

A. No. There are currently two guides, a beginner, and intermediate, which are meant to teach you everything you need to know to start making pure CSS images. You can either reference the article as you start the challenge, or start the challenge after you walk through the guides. Usually, the beginner’s guide is enough to get you going.

6. I keep getting stuck, what should I do?

A. You can ask fellow participants, check the code of other participants, reference the guides provided again, or contact us via Twitter or email.

7. What skill-set is this aimed for?

A. If you are a beginner or advanced, you will get benefit out of this challenge.

8. Can this count for #100daysofcode?

A. You bet!

9. Are there prizes for participating?

A. Other than ways to reach ultimate promotion, not yet. However, this will be changing as the challenge grows.

10. What do I do after I complete this challenge?

A. To be honest, I am still trying to get feedback and find a plan to create more content. Stay tuned for updates.

11. I accidentally deleted my emails, what do I do? (or other support related issues)

A. Email or message us, we won’t bite.