This article was originally posted on my personal blog.
Two years ago, I had just gotten employed at my job and we were going through an in between projects and contacts phase. Basically, as a developer, I was bored.
I didn't want to waste my time, so I decided to improve my CSS skills. Back then CSS for me was what I couldn't do with Bootstrap. It was just simple properties I added here and there. So, I decided I'd up my game by looking up challenges online.
Suggested Read: CSS Variables and How to Use Them
Codepen Challenges
The first place I went to for challenges was Codepen. Codepen has a new theme of challenges every month, and every week of that month there would be a challenge revolving around the theme.
The first challenge I did was for a ghosts challenge (It was October at the time and the theme was Halloween).
Pretty lame to be completely honest. But, with time I moved on to something like this:
And this
Looking back at it, I found these two so hard to do. My skills were so much lacking that designing a table with a hover effect seemed like it was too much.
Codepen was not enough though, as the challenges were just once a week and I needed to do more. So, I had to look through other challenges online.
Daily CSS Images
Daily CSS Images takes a more fun approach at learning CSS. Basically, everyday you create a certain object or animal, but with CSS. At the time I thought "how would learning how to make a bear be helpful?" but after time I realized that it's not about what you were making, it's about how you make it and what you learn in the process.
So, I made a bear with CSS.
I learned how to use rotate and transform through this one. I remember I was so confused trying to make the ears in particular. After I was done though, I felt so proud of it.
Another one I did was a clock. Now this one I needed a tutorial to help me because I didn't know how to make the clock hands move without Javascript. Before doing this, I thought it was impossible to do it with only CSS.
Through making this one it was my first time even hearing about transform-origin. I also expanded my knowledge a lot by using transform and animations. This one was a big step up for me.
I also did an elephant, a beaver, a jellyfish, and a rose. Daily CSS Images Challenge helped me understand more about animations and transforms and perspective in CSS.
Daily CSS Images Challenge also helped me step up my CodePen Challenges game!
Although these challenges helped, I needed to move on to something more realistic. A challenge where I would make something that I would actually make in a real project.
100 Days CSS Challenge
100 Days CSS Challenge was my favorite challenge to be a part of. First off, their website featured the works of developers who participated on CodePen, so it was a nice boost for me. Also, their challenges looked so beautiful to me, and in a lot of cases, something I'd love to do on a next project of mine.
The first challenge I did was this:
A simple grid of images that shows a heart on hover. Yes, it is simple, but again because I lacked in my skills it was helpful.
I also did this Search bar:
And this counter:
Again, all simple concepts, but it was still really helpful. I learned how to make prettier designs. CSS isn't just about knowing how to do something or memorizing the properties, it's also about utilizing what you know to make a visually pleasing design.
These challenges also had Javascript in them so it was helpful to practice Javascript as well.
Codevember
Another challenge I took on as well was Codevember. Codevember ran from 2016 till 2019, and it would show a list of challenges for every day in November.
Codevember's challenges were simple. Each day would have a keyword and you have to create something that relates to it. This helps shift your perspective from just coding with CSS to using your imagination to find an idea, then think how would I bring this idea to life with CSS.
So, at first when the concept was Infinity, I took a pretty simple approach to it:
But when the concept was Web, I made a spider sitting on a web (with the help of SVG):
It helped me think more creatively and then try to find a way to do it with CSS, while maintaining what I learned from 100 Days CSS Challenge to make it visually pleasing.
Conclusion
Everyone knows that to improve your skill in any programming language, you need to practice. Even if it seems hard in the beginning, with time you will improve and you will learn new concepts and ways of thinking as well. Whether it's CSS or any other programming language, look online for motivating challenges to keep you going and practicing to become a better developer.
Top comments (15)
CSS is such a broad language it can seem limitless to me sometimes, but all the same - sometimes very hard to reason about. I love these code challenges, and great job on your designs! I'll have to try out more "CSS drawing" ☺
Thank you! Yea CSS images was a great help even if I didn’t expect it to. It’s a different kind of challenge for sure.
Some really lovely designs - I liked the grid of animals in particular!
Thank you Paul!
thanks for sharing
Your post really inspires me! It’s awesome how consistently working at something and incrementally getting better makes such a huge difference. Great job.
Thank you and I'm glad you found inspiration through it!
This is simply awesome.
Great work!!!
I also invite everyone to: css-challenges.com/ .. Challenges and quizzes are there ;)
Practice makes you perfect. Cool Article. I still struggle with SVG
Thank you for sharing your journey on CSS :)
thank you: botasot
There's a site I found a couple of months ago exploring grids and trying to work on some responsive diagrams. I found it very interesting.
labs.jensimmons.com/
Do you have any solar sites?
Some comments may only be visible to logged-in visitors. Sign in to view all comments.