*This post was first published on my blog.

Writing CSS is hard. Even though it often is made fun of and not seen as a programming language, writing consistent and pretty CSS is really hard. And in my journey as a self-taught web developer, I have often noticed that online classes and tutorials often skip the part to design your app with CSS and don't go into detail about CSS best practices and more.

And I feel that many other front-end developers struggle with this issue as well if I look at the majority of portfolios out there. We learn how to build a restful API before we learn how to properly use the CSS transition or box-shadow attributes to style a simple button.

That's why I have decided to share my top 10 resources on how to get better in CSS with you, so your portfolio will impress your clients!

Quick note: These resources are challenges and project-style meaning you learn through actively using CSS instead of going through tutorials or online classes! I much prefer this method as it teaches you how to look up things on your own instead of following a path that's laid out for you in class.

With that said, let's get into it!

Table Of Contents

1. Frontend Mentor
2. 100 Days of CSS (CSS Challenge)
3. Front-End Challenges Club
4. Daily UI
5. CSS Battle
6. Codier.io
7. Build something you found on Dribbble
8. 30 Days of CSS Girls
9. Daily CSS Design
10. Ace Front End

1. Frontend Mentor

Frontend Mentor is hands down one of the best resources out there. Proving you real-world project ideas and free assets to build them, sharpening your CSS skills with this resource will also mean you end up having more assets in your portfolio!

2. 100 Days of CSS (CSS Challenge)

100 Days of CSS is helpful as you can see what others have built and if you submit your own code, you will show up on the challenge site as well! This is also good if you are struggling, and just want to take some hints from other people's solutions.

3. Front-End Challenges Club

The Front-End Challenges Club consists of 8 challenges by the Piccalilli and their respective solutions. Some of the challenges come with assets if they are needed, so you can dive right in!

4. Daily UI

DailyUI is more a resource for designers than front-end developers, but nonetheless, I think it's well worth mentioning. I often get asked by my clients to come up with designs on my own or give recommendations, so I think any front-end developers should at least know some of the design concepts! You will notice the effect on your CSS skill for sure!

5. CSS Battle

CSS Battle has become very popular recently with some of the biggest web developer Youtubers battling each other in their videos. Challenges range from very beginner to very advanced and the game factor motivates, but writing quick solutions gets you more points instead of clean and consistent ones... Nonetheless, fun and learning in one!

6. Codier.io

Codier.io lets you create solutions to their challenge right in the browser and compare them with the community. However, most of the challenges are geared towards beginners, so this might be too easy for some of you!

7. Build something you found on Dribbble

If you haven't heard of Dribbble yet, it is one of the biggest platforms for designers to showcase their work on the web. From animations to product branding, print, and web and mobile design, you can find it all. It's a great resource to find beautiful web and mobile designs and recreate them in code for practice!

8. 30 Days of CSS Girls

30 Days of CSS Girls is a 30 Day Challenge that teaches you many of the basics of CSS and how they work. If you are a beginner, this might be where you want to start.

9. Daily CSS Design

When I came across Daily CSS Design, I was stunned. It's a project by Bjørn Fjellstad, a designer and developer, who created a different design every day for one whole year. The designs in themselves are amazing, but the presentation on his website also speaks for itself. If you want to step up your CSS, you might want to get inspired here!

10. Ace Front End

And lastly, Acer Front End. A beginner to intermediate level resource to let you become more confident (or not) in your skills as a developer. Finish the challenges right in the browser and become a "better" dev.

That’s pretty much it!

Thanks so much for reading this far and feel free to reach out to me anytime, on my website or Twitter 🙂 And if you like to read more, make sure to check out my other posts on my blog!