DEV Community

loading...
Cover image for How I Improved My CSS Skills

How I Improved My CSS Skills

shahednasser profile image Shahed Nasser Originally published at blog.shahednasser.com ・4 min read

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.

Discussion (15)

pic
Editor guide
Collapse
ash_bergs profile image
Ash

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" ☺

Collapse
shahednasser profile image
Shahed Nasser Author

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.

Collapse
paul_duvall profile image
Paul Duvall

Some really lovely designs - I liked the grid of animals in particular!

Collapse
shahednasser profile image
Shahed Nasser Author

Thank you Paul!

Collapse
shauncraig profile image
Shaun Craig

Thankyou for this post.
I really need to improve my own CSS styles.
This will help me out alot.

Collapse
4samayal profile image
Samayal 4 You

thanks for sharing

Collapse
afif profile image
Temani Afif

I also invite everyone to: css-challenges.com/ .. Challenges and quizzes are there ;)

Collapse
luisbribiesca profile image
luisBribiesca

This is simply awesome.
Great work!!!

Collapse
gedalyakrycer profile image
Gedalya Krycer

Your post really inspires me! It’s awesome how consistently working at something and incrementally getting better makes such a huge difference. Great job.

Collapse
shahednasser profile image
Shahed Nasser Author

Thank you and I'm glad you found inspiration through it!

Collapse
rahxuls profile image
Rahul

Practice makes you perfect. Cool Article. I still struggle with SVG

Collapse
kimboy1520 profile image
Lisa ❤

Thank you for sharing your journey on CSS :)

Collapse
sibagon profile image
Serge Ibagon

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?

Collapse
khunfoshary profile image
Mahmoud Bakheet • Edited

great job .. and I love the skills that you have ..🥰 I can’t believe that’s a CSS .. that I should know ☝🏽 I'll have to try out more CSS .. thanks..

Collapse
fionajames55 profile image
fionajames55

Thank you for this post. I truly need to improve my own CSS styles for this. This will help me out a lot.