How to start learning CSS

March 25, 2020 | Reading time 4 minutes

Learning to code can be though. It’s like a huge mountain that you decided to climb, but once you see the mountain in real life you get desperate. Where do you start? And how will you do it? The same goes for coding. Many people start coding by learning HTML and CSS for web development. That also applies to me and just I was quite late to the game. I did play around with it before, but it wasn’t until my late thirties that I decided to give my skills a boost and started learning CSS for real.

Like many others I wanted to start with HTML and CSS and to make the leap to something like JavaScript, Ruby on Rails or Python. In the end I sticked to mainly CSS, because I love making things with CSS. Building websites and tools mostly with plain HTML and CSS (and little bit of JavaScript) is a joy and you can make fast and smooth products with it. I have learned the basics of PHP and JavaScript, because you can’t ignore it and sometimes you just need it. But my heart goes with CSS.

Learn CSS

The basics of CSS aren’t hard to learn. If you want text to be red you just type “color: red;” and that’s it, but CSS can do much more and that’s why you should invest in learning CSS. In this article I want to share some tools and sources that can help you get started.

Code Editor

When you want to code you will need a code editor. There are some online tools, but I prefer to have a editor on my laptop and you don’t need a very powerful laptop to run i1. Since I have my Surface Laptop 3, I do most of my work on that device and it only has an i5 processor and 8GB of RAM.

There are lots of code editors and I prefer to use Visual Studio Code. Microsoft released it just a few years ago and it’s very good and popular. There are tons of useful extensions that will help you do your work.

Other editors that I have used are Atom and Brackets. These are also free and good. All these editors are available on Windows, macOS and Linux.

W3Schools: Try it Yourself

This is one of my places to start. With W3Schools you can start learning HTML and CSS from scratch. It has short explanations, lots of examples and the best part is that it has a “Try it Yourself” feature. You can start with the very basics of building a web page to more advanced things like working with SVG.

Mozilla: documentation

Most people will know Mozilla because of its browser Firefox (which improved a lot over recent years and more people should use it), but they also provide tons of resources for web development. When you are new to web development Mozilla is a great place to learn CSS and more. The documentation gives you more of a deepdive after W3Schools.

FreeCodeCamp: extensive

FreeCodeCamp is another great online platform where you can learn web development and just like the others it’s free. The people behind FreeCodeCamp do an amazing job in learning you HTML all the way to JavaScript and using databases. FreeCodeCamp offers over 1.500 hours of courses and there is a online community that an you. You will learn web development by doing and that’s the best way.

Google is your library

When you’re playing around, trying to build something, you will often don’t know how to do it. Go to Goole, Type in what you want to do (e.g. how to change the color of a SVG element in CSS) and you probably find the answer. There is so much information, answers to questions and examples out there and Google is your library.

Go!

In the end, the best way to learn CSS is by typing it. Start building your first website. Keep trying new things and when you see a website with something you like, try to build it yourself. It’s the best way to learn.