Resources for Learning CSS

During the first few weeks at General Assembly, what I struggled most with was Cascading Style Sheets (CSS). CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML according to MDN Web Docs. Basically, it's the language we use to style what we see on a webpage.

I struggled to translate a design onto the screen and it meant I was spending hours trying to centre a text box in the middle of a div. Thankfully, there are wonderful resources online.

I have put together a list of resources that I've found super helpful. I will keep this list updated with any new resources I come across 😊

1. Advanced CSS and Sass by Jonas Schmedtmann

Jonas Schmedtmann's Advanced CSS and Sass course has taught me 80% of what I know about CSS. He goes into detail about how CSS works behind the scenes, as well as teaching modern techniques, including Grid and Flexbox, that is highly applicable to frontend development.

The course is 28 hours long and is divided into three projects, which I recommend taking in order.

It is a paid course on Udemy, which often has sales so you could purchase the course for less than 30 USD.

If you are a beginner, you can still take this course but it won't be as easy to grasp the concepts compared to if you know the basics. So I recommend learning the basics from freeCodeCamp first before taking this course.

Jonas also has another course called Build Responsive Real-World Websites with HTML and CSS. I haven't taken this course but, if it is of similar quality to his Advanced CSS and Sass course, it may be worth considering. It is almost 50 hours long, so it will be the only HTML and CSS course you will need to take.

2. MDN Web Docs

MDN Web Docs provides information on HTML, CSS, JavaScript, Web APIs and other topics. It contains an introduction to CSS, tutorials and, what I mainly use the page for, an exhaustive CSS reference describing every property in CSS.

If you ever wanted to look into a CSS property, Googling the property with the letters "MDN" will link you to the relevant MDN page.

3. CSS-Tricks

CSS-Tricks contain articles on CSS, HTML, JavaScript and all things related to web design and development.

After learning the basics of CSS, I encountered trickier problems I just couldn't solve. That is where CSS-Tricks has saved me quite well a few times.

Here are some of my favourite articles from CSS-Tricks:

• A Complete Guide to Flexbox
• A Complete Guide to Grid
• Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit
• Fluid Typography
• Fixed Headers, On-Page Links, and Overlapping Content, Oh My!

The last article I used to help me with this portfolio.

4. freeCodeCamp

freeCodeCamp provides tutorials and posts on CSS.

If you're a beginner, I would work through freeCodeCamp's Responsive Web Design certification starting with Basic HTML and HTML5 and then Basic CSS.

What I love about freeCodeCamp is that they provide you with practical exercises to test your knowledge where you can code in their sandbox. You can also run tests to check your answer for each challenge.

5. CSS Games

The following games are fun and interactive.

• CSS Diner - for learning about CSS selectors
• Flexbox Froggy - for learning about the different properties to do with Flexbox
• CSS Grid Garden - for learning about the different properties to do with CSS Grid

6. YouTube

YouTube has many free courses on CSS.

Two of the CSS courses I've watched a few videos from include:

• Wes Bos' What The Flexbox?!
• Wes Bos' CSS Grid

Final Thoughts

If you are just starting off learning CSS, I recommend taking freeCodeCamp's Responsive Web Design certification starting with Basic HTML and HTML5 and Basic CSS and then Jonas Schmedtmann's Advanced CSS and Sass course. This will have you skilled up with basic and advanced CSS, as well as Flexbox, Grid and SCSS.

You do not need to take multiple courses on the same topic e.g. you shouldn't take two courses on CSS Grid.

What will contribute most to your learning is practice. That means building out webpages. A good place to start is cloning an existing website because it means you don't have to come up with a design from scratch.