I get this question at least once a day:

"Can you share tips and resources to learn CSS?"

So I've decided to curate a list of resources where one could learn or improve their CSS Skills.

Important tips to remember:

  • Practice and Repetition. I think I've written "border-radius: 50%" about 5 billion times. 😆
  • Working with CSS is a very visual process. It requires a lot of iterations between code and the rendered DOM elements to see what works. This ain't Java or Javascript.
  • Read code from others. This will improve your coding skills by learning from those more experienced. Its like with any foreign language, you have to listen more to improve your vocabulary. I learned how Sass/SCSS worked by reviewing lots of code on open source platforms like Codepen.

Resources:

1. Basic CSS on FreeCodeCamp Start with the basics. Learn all the basics of CSS for free on FreeCodeCamp.

2. CSS Reference. A visual guide to CSS properties with illustrations.

3. Flexbox Froggy
Next I recommend getting familiar with different layout techniques. If you're new to Flexbox, this fun little game with frogs will help you understand Flexbox better.

4. CSS Grid Garden
CSS Grid is another way to layout your page. It is fairly new but this garden game makes learning fun and smooths out the learning curve.

5. CSS Grid by WesBos.

6. Pseudo Selectors such as :before, :after and many more on CSS Tricks.

7. Join challenges like Daily CSS Images
CSS is versatile and has many attributes that requires many reps. Doing challenges such creating images with strictly CSS forces you to break down problems into smaller components. It also allows you to be creative in your approach. Read my journey through CSS images on Medium.

8. Youtube
There are tons of videos about front-end development on Youtube. Stop binge watching Netflix and try a few awesome tutorials on the many dev channels on Youtube. One of my favorite channels is DevTips, particularly their playlist on CSS Animation.

9. Codepen
Many talented developers share their code experiments on Codepen. This platform is a great resource to discover cool tricks and get inspired by all the amazing things our newfound skillset can do. Shameless plus for my page: https://codepen.io/sashatran/ 😊

10. Sass/SCSS
Once your comfortable with CSS. You can advance to familiarizing yourself with Sass/SCSS, a powerful CSS preprocessor, which allows you to do some neat things that plain CSS can't do. You can find some quality snippets here on my blog.

11. Mozilla MDN
This is my go-to place I go to lookup CSS attributes and how they are used. They have great examples on there and clear explanations of all the CSS features.

12. Google
Last but not least, do not forget the all mighty search engine. Google is your best friend, you can explore almost any question on CSS and venture into endless rabbit holes. When you return from the dark depths of CSS lore, you may find a few gemstones which better equip you for your next journey.

Share this