How to properly learn CSS

Meme

---

1. Don't replicate entire websites first: Replicate components first. When starting out with CSS, it's better to start by replicating UI components such as navbars, modals and testimonial cards to get a understanding of basic CSS concepts. Replicating entire websites as a beginner can be daunting at first. Once you've created a level of proficiency, i.e, after learning flexbox and grid. You can now start replicating entire websites.

2. Follow a curriculum: Websites like web.dev and w3schools offer a detailed course on CSS (I personally prefer web.dev). Following these courses and practicing the examples demonstrated can help to gain a basic understanding of basic CSS concepts before moving on to the more advanced ones, ensuring you don't miss any important concepts.

3. Understand CSS terms and terminologies: Terms like writing-direction, main axis in flexbox, stacking context are among the many useful terms to learn in CSS. Understanding them are very important especially when learning more advanced CSS concepts. Trust me, they help.

4. Inspect Websites: Go to your browser's developer tools and navigate to the styles panel. Choose a website you admire or one that sparks your curiosity. Observe how the webpage's elements are styled. You'll gain valuable insights (layout techniques, responsive design) into real-world CSS implementation and discover techniques you can apply to your own projects.

5. Ask AI: What is the clamp() function in CSS?, what does max-inline-size property do in CSS?. AI is like that patient friend that can take all of your seemingly silly questions. By asking clear and specific questions, you can get the answers you need. For example, try asking: 'Explain stacking context in css like i'm a 5 year old child.'.

Bonus Tip

Tailwind is not a CSS replacement. What tailwind essentially does is to reduce the reliance on writing custom CSS files, it does not replace the need for core CSS knowledge. A strong foundation in CSS is still essential when working with Tailwind.

Do you have any CSS learning tips that have worked for you? Or perhaps you have a different perspective on the tips shared above? We'd love to hear from you! Share your thoughts in the comments below.