Daily CSS Images (My journey to creating a 50-day pure CSS email challenge)
What you’re getting into: A 8-minute read of being a fly on the wall to the launch. This is not meant to be a “hey I made this, here’s a lazy blog post, go check it out” type post. Rather, I go into detail about my journey to this point and specific details for how I launched and what tools I used.
If you don’t want to hear my backstory, you can skip to the final two sections, but I suggest you read this article if you have the time.
Self Promotion/Affiliate Links: This is meant to be a thoughtful, informative, and interesting post that also promotes my launch. I also have 1 affiliate link to Convert Kit, because I was legitimately satisfied, it fits the flow of the post, and I don’t mind something in return for giving my input.
Introduction
Today is an exciting milestone in my development career. I launched Daily CSS Images, which is a 50-day email challenge where you receive a challenge to create a pure CSS image every weekday.
What’s crazy about this launch is that it was relatively simple as far as how long it took me to actually put it together. However, when I reflect on it more, it truly was a year long progress in the midst of a battle where I almost quit trying to be a developer.
In this post I am going to be very transparent about three things:
- My crisis of trying to become a developer (and how it relates to this launch)
- How I came up with the idea, the work I put in, and the launch process
- My future plans for development based on this project
Developer Crisis
In December of 2015, I came out of a college with a bachelor’s degree in Computer Science and entrepreneurial enthusiasm. I thought that I would apply for jobs and in the short period that I didn’t have one, I’d still work to create my own web design company that focused on businesses in my hometown.
I figure I’d eventually be able to code in C++ or Java all day, and then put a few hours into my web design company until my side project could be a full time deal. But it flopped…
My degree only covered basic HTML and CSS principles, so I thought the best decision was to just make install Wordpress templates for people and edit some code here or there when needed. It’d be easy for me, I would make decent income, and I’d be able to have my own business.
Well, it wasn’t that easy.
Basically, I overwhelmed myself with trying to do web design, SEO, email marketing, and social media marketing. Even though I used handy web apps, I was overwhelmed and drained by wearing so many hats…and I wasn’t even landing clients.
The few clients I landed were very hard to work with and were out of tune with modern marketing strategies that it was nearly impossible to communicate and show the importance of what I could offer.
Within a few months, I had no job, no clients, and although I wore many hats, none of those hats were relative to my degree.
The hardest part was that I was so discouraged from becoming a developer. Add to all the things I’ve mentioned, I realized that my education was very outdated in some areas.
For instance, I always had an interest in web development, but besides HTML, CSS, and some basic PHP, I knew nothing else. I started hearing these buzz words like “React”, “Angular”, and “API” which were all completely foreign to me.
Some time went by and I took an IT Help Desk position, which was miserable. Besides some PowerShell scripting and a few fun projects, I was spending my time telling people to restart their computers among other trivial tasks that were a drag because it wasn’t what I wanted to do and I knew I was capable of more.
A turning point came when I started to do vector graphics. I don’t know how the inspiration developed, but I discovered Dribbble and Affinity Designer and had a blast making random things like these “Autumn Hops”.
I soon realized that it really wasn’t that difficult. All I was doing was putting shapes together to create a final image, just adding some color to give it life.
With this boosted confidence, I decided I would challenge myself to take my new design skills to the web.
This is when things really picked up steam.
I went to Codepen, a site I had briefly come across before, and decided to make an “interactive resume” based on a vector design I had done.
I just positioned images across this web page that had links to other pens when you clicked.
After tweeting about this new pen, I woke up to 4k views and being featured on Codepen’s home page.
My confidence was back and I was hooked.
I progressively started to do mini front-end development challenges that would help me achieve my goal of taking my new design skills to the web.
As time went by, my pens were getting great feedback. I made things more challenging doing landing pages, UI cards, etc. Then, I started to tackle the daunting JavaScript frameworks like React and Vue JS.
To this day, I am still following a similar pattern of my big breakthrough. Creating vector graphics for inspiration, transferring those design skills to front-end development and leveraging on my computer science background to do more complex web applications.
I now feel confident that I can create a full-scale web application, preferably in Vue Js, that can make use of algorithms and all the computer science information I knew, but now along with a particular emphasis on design and creativity.
So what in the world does this have to do with the launch of Daily CSS Images? Well, everything.
If it was not for my developer crisis and my experience of breaking out of that by practicing mini design & development challenges, I would not have the confidence, skills, or excitement as I do now about front-end development. I have found an incredible niche focus of a design/development hybrid that has shaped my entire career.
Because of this, I decided to create a 50-day email challenge that would give people a small, tangible projects that would translate to a vast improvement of front-end development skills, and confidence.
I am excited to release Daily CSS Images because I will be able to see people grow as front-end developers and experience the progress that I have enjoyed so much lately.
The Launch
Now that you understand how much effort truly went into this launch, I thought it would be cool to let you be a fly on the wall to describe how I put Daily CSS Images together.
I will explain to you my 3-day process. ~ Yes that’s right, 3 days!
Again with my backstory and experience I have in marketing, I think it was much longer than that in reality, but the actual implementation was a 3-day process.
Day 1
I had been working very hard on releasing new pens and writing about what I was learning. I wanted to be resonating with beginners to give them tips to become strong front-end developers.
One particular blog post that caught a lot of attention was A Beginner’s Guide to Pure CSS Images. In this post, I described how I was creating my very popular pure CSS images in Codepen.
At the end of the post, I was giving people brief ways to continue practicing. After a lot of feedback, I wanted to give people a better way to keep learning that wouldn’t be some time consuming as shooting and editing YouTube videos.
The idea clicked. I would create an automated email sequences giving people a pure CSS image challenge daily, similar to UI Challenge.
I scrambled to Evernote and wrote down 50 challenges divided into 10 different weekly themes.
Day 2
I knew all I had to do is create the sequences via an email automation software and automate Twitter with Buffer.
I decided to go with Convert Kit for all my email automation.
I actually have heard the founder speak a few times on some entrepreneurial podcasts I listen to. He is a former developer who also has great business ideas and strategies, I signed up trusting that I would get a great product and I was right.
Convert Kit has been super simple and easy to incorporate. All I had to do was sign up for $29/month, create a basic form, create a 50 step sequence, embed the form into a landing page, and create a simple responsive email template.
I simply threw together a basic responsive email template as needed and copy and pasted the HTML right into Convert Kit, tweaking a few lines of code for each email.
For each sequence, I selected to send out days to be M-F with 1-day length from the previous email.
I forked a really popular recent pen that was a portfolio page I initially made for freeCodeCamp. I changed the colors and some lines of code, pulling from existing material of previous pens, and by the end of the day, my landing page was done.
I embedded the form, deployed via Amazon Web Services (super easy), created a professional email with Google Suite, and notified convert kit of the purpose of my site and all I had accomplished (they have to approve your account before you can go live).
Day 3
Convert Kit approved my account. I created a Twitter account for Daily CSS Images and made some very simple graphics.
I tested my landing page to make sure subscriptions were working with Convert Kit.
I then posted the milestone to Twitter.
I made sure to include the #100daysofcode hastag. 100 Days of Code is this awesome campaign from freeCodeCamp that is getting people to commit to an hour of code a day. I had legitimately made the landing page as part of the challenge, which I have been consistent with, and knew it wouldn’t hurt to get some extra exposure.
I started to get notifications of retweets, likes, and subscriptions.
At that point, I shared on Hacker News, notified some developer friends, and started writing this blog post to share the experience.
Future Plans
My future plans for Daily CSS Images is to first sit back and watch how people interact as I continue to work full-time, freelancing, #100daysofcode, and be a husband. Since this is pretty much entirely automated, I won’t have to do much expect to promote.
I am hoping to eventually do my own challenge and possibly develop a site to make this more of a community than just an email challenge.
I would love any feedback and input below.
Lastly, please check out Daily CSS Images, it would be super cool if you did.
Cheers!
Mike Mangialardi
