The Best Free & Online Resources For Learning CSS
The following blog post covers multiple free online resources that are invaluable for aspiring web developers. I will also share my personal experiences with them and how they taught me to become a better web developer.
Cascading Style Sheets (CSS) is a programming language that is part of the web stack (HTML, CSS, JS). It should be your first stop after learning HTML (not a programming language but a set of rules to organize elements on a web page). CSS is used to style web pages so the results are very visual and directly rendered in your browser. This is why I would recommend video tutorials over book tutorials: you can see the immediate results when running an HTML page with an external CSS stylesheet.
The single CSS resource I’d recommend to absolute beginners
The best (and free) CSS video course for beginners is available on FreeCodeCamp’s YouTube channel:
Instructor Dave Gray does a great job in showing different CSS concepts and how they work together. The 11-hour course includes a combined set of tutorials and projects. I found myself coming back to certain videos after working through the exercises of FreeCodeCamp’s Responsive Web Design Certification.
One of the great takeaways from Dave Gray is that there’s often more than one way of doing things in CSS. While there are best practices that you should learn, there are other approaches to solving a certain web design problem. One (obvious) example would be the choice between Flexbox and CSS Grid. These are both great solutions, but oftentimes people prefer Flexbox as there as fewer properties than with CSS Grid, making it easier and faster to come up with a working solution than with CSS Grid.
When watching this course for a second time, I put more effort into reading the source code in the Visual Studio Code editor on my own machine to make sure I understood both the starter code and the working solution. Oftentimes, people forget that coding is not just about writing your own code, but also about reading and understanding other people’s code.
A second improvement I noticed in my coding habits is that I got more familiar with Chrome Developer Tools, which Dave Gray often accesses in his video tutorials. Learning to manage it to make sure your code works as expected using Chrome Developer Tools (an extension of the Chrome web browser for web developers) is a way to test your assumptions when writing and running the code in a browser. Chrome has excellent tools available to see the box model for separated elements, how CSS Grid is applied and how a page looks on different devices and using media queries.
(One thing that can confuse you a lot as a beginning web developer is inheritance, meaning that elements implicitly inherit values from parent elements. Especially with font sizes, this can become a problem if you do not know or understand how this works. Again, Chrome Developer Tools displays the absolute pixel values of font sizes, which is great when you’re using relative units instead of absolute values for this.)
CSS Projects for beginners on FreeCodeCamp
The FreeCodeCamp module “Responsive Web Design Certification” offers a set of *free* projects where you learn step-by-step how to build a project from scratch. I would very much recommend these projects for beginners to get hands-on experience writing and repeating basic CSS commands, and learning while doing.
I have to add that the quality of these projects varies and that oftentimes you feel like a robot when following the instructions, without understanding what you’re doing. One way to understand the instructions better is to break the code right after passing a test and look in the preview window what has changed on the screen, such as different spacing, coloring or new objects that appear. This made me understand what I was doing and, in case nothing changed, why this was the case. For example, a div is not visible without a height, width, and background color. You create many divs at once in your HTML, but they won’t be visible without these properties.
(When you get stuck with these projects and cannot find a working solution, you cannot proceed with it. To look for help, you can Google the name of the project and the point where you’re stuck to access a forum where other users posted hints and example code. I found this to be a rather tedious way of overcoming obstacles, although it works.)
Another issue with these projects is that it’s easy to forget the snippets of theory that are found within the exercises. These are equally important as your code to get ahead to a working solution. Although these projects focus on one or two CSS topics at a time, you are also repeating other topics but getting it all together in a single project with 100+ steps can be a little overwhelming. The trick is to focus on one or two of these topics per project and see what you’ve learned about these topics after finishing it.
To get even more out of these projects is making something of your own that resembles the end result of the projects and experimenting inside Visual Studio Code with the finished project code. That way, you can circumvent the preview option offered by the FreeCodeCamp website and see how they look in your browser. You could even decide to see how they look on different devices and write media queries to make them look better for smaller and medium-sized devices.
How to learn from other people’s CSS web development projects
To get the most out of other people’s web development projects and actually learn from them, experienced programmers recommend beginners try to “code ahead” of the instructor instead of copying the instructor’s code. Indeed, you do not learn anything from copying code. However, when learning concepts for the first time, I prefer to figure out these before I learn syntax as this is how you apply new concepts.
In addition to this 11-hour video course, I’d recommend the MDN Documentation, which the instructor often refers to. This is the official CSS documentation and I found the concepts there better explained than on W3Schools.com, which is an adaptation of MDN. CSSTricks.com is another great resource, especially when you get to CSS Grid and Flexbox.
One of the caveats when starting to learn CSS is to compare yourself with others, or try everything at once. CSS takes time to learn, probably a couple of months before you start to get the hang of it. Take it slow, and look for “best practices” from professionals beyond the 11-hour course I mentioned earlier. There’s a great video from the same instructor on mistakes from CSS newbies and how to avoid them.
If you’ve tried the free projects from FreeCodeCmap, I’d recommend watching some run-through videos of others (such as this one) to see how they’ve tackled the project and how they’ve enriched or personalized them with other CSS concepts such as grid or flexbox. Also, look for professionals on YouTube who share their secrets that you can use for your own projects. For example, Kevin Powell has a YouTube channel with lots of great projects, tips and hands-on experience for CSS projects.
Additional FreeCodeCamp CSS resources
I’d also like to mention this project-based web development course from FreeCodeCamp. The instructor is really something else, obviously very clever and funny, which makes this course a delight. I’m thinking of taking it again and coding ahead now that I’ve seen it a first time. I would recommend this to keep repeating to apply concepts you’ve learned earlier and actively practice coding (still the best way to learn a coding language).
This is also a great moment to mention FreeCodeCamp’s blog section with short how-to’s. You can search on CSS topics only. I think this is a goldmine for web developers, but if you don’t know it exists you probably won’t find it. W3Schools.com has a CSS Example section with code snippets you can use for your own projects, such as a header menu created from an HTML user list. There’s no need to reinvent the wheel, so use what there is out there for isolated parts of a website.
The hard part: practicing CSS repeatedly and consistently
“Great list of resources, but how do you actually get good at CSS?”, I hear you ask. Good call. So getting better at CSS over time is the result of slow, consistent effort. This goes for everything you want to learn. In the case of CSS, what I tried to do is work on things I was very bad at or continued to confuse me. With this in mind, I took Dave Gray’s entire course another time, this time focusing on his explanation of certain topics. It turned out it had missed 75% of his information the first time around. Which is because I solely focused on syntax, rather than understanding the concepts behind CSS.
The second time, I understood why things work how they work and recognized the best use cases for certain topics (such as positioning). After a few months, I do not claim to be an expert CSS programmer but my understanding of it has improved significantly. I also get better at spotting design errors in other people’s websites. For example, badly styled buttons, menus, too much or not enough spacing between elements.
Again, I said that one possible pitfall of CSS is to do everything at once. This is not very practical as there many different CSS concepts and not all of them are for beginners. Advanced topics probably only make sense after one or more years of projects under your belt. You can also ask yourself is CSS art is something you should aim for as a beginner. It looks nice to the eye, but it’s not the reason CSS was invented (it is used for styling web pages, not just for creating nice graphics).
I’d suggest pickick a CSS topic that interests you, and exploring it further by watching a tutorial or experimenting with example code from documentation. After that, move to another and see what you can do with it. But first, get the basics down.
What’s next?
And after that? Should you dive into JavaScript and one or more frameworks? I’d say the choice is yours but it’s tempting to move on quickly after learning the basics of CSS. However, mastering CSS takes months or even years. You do not become a CSS expert overnight. But I think it’s a very worthwhile investment to learn CSS as it lets you build and edit web pages from scratch, even WordPress templates. After learning the basics, there’s nothing that stops you from moving to more advanced topics and tools, such as the Tailwind CSS framework, or tackling complex projects and use cases.
Refactoring CSS code can be a good tactic to improve your existing code. This means making sure properties and values are not repeated extensively by declaring variables at the beginning of your CSS sheet. Improving your code makes it more readable for others and shows you can apply good coding practices.
One last resource I’d like to add is Google’s Styleguide page. This page offers free styleguides for many programming languages, including HTML and CSS. If you’re looking for best practices applied by a leading tech company, have a look here and see how developers at Google write great HTML and CSS code.
Here’s a link to another blog post about recommended CSS books.