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 for a ghosts challenge (It was October at the time and the theme was Halloween).
See the Pen Nice Ghost by Shahed Nasser (@shahednasser) on CodePen.
Pretty lame to be completely honest. But, with time I moved on to something like this:
See the Pen Tiger Pattern on Hover List - #CodePenChallenge by Shahed Nasser (@shahednasser) on CodePen.
And this
See the Pen Focus Table / Hover Table by Shahed Nasser (@shahednasser) on CodePen.
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.
See the Pen CSS Bear Cub - #DailyCSSImages by Shahed Nasser (@shahednasser) on CodePen.
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.
See the Pen CSS Alarm Clock - #DailyCSSImages Challenge by Shahed Nasser (@shahednasser) on CodePen.
Through making this one it was my first time even hearing about transform-origin. I also expanded my knowledge a lot with 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!
See the Pen CodePen Challenge - Panda by Shahed Nasser (@shahednasser) on CodePen.
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:
See the Pen #100daysCSSChallenge by Shahed Nasser (@shahednasser) on CodePen.
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:
See the Pen Search Bar - 100 Days CSS Challenge by Shahed Nasser (@shahednasser) on CodePen.
And this counter:
See the Pen Counter - 100 Days CSS Challenge by Shahed Nasser (@shahednasser) on CodePen.
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:
See the Pen #codevember - 01 - infinity by Shahed Nasser (@shahednasser) on CodePen.
But when the concept was Web, I made a spider sitting on a web (with the help of SVG):
See the Pen #codevember - 03 - Web by Shahed Nasser (@shahednasser) on CodePen.
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.