Start to learn CSS
Hello everyone and welcome to the another tutorial with me. Before we start to learn CSS we should know what is this language, CSS is styling language, for example in this website the font of text, all of the buttons and many more made possible by it.
If you want to code a website you should learn CSS, HTML and Javascript. Imagine my website is a house, in this case the HTML is the structure of house, CSS is the walls, floor and roof of the house and Javascript is the core function or the electricity, plumbing and doors of the house, this language indeed makes the house functional for its owner.
Now that you know utilities of this language let’s start to learn CSS, in this article I will prepare you for the real tutorial, if you have the tools needed for coding, you can skip this article and go to the tutorial section.
How to start
For learning any language we need some tools, the only tool that we need to learn CSS is visual studio code, this tool is essential for our coding journey. It is light editor that could handle heavy codes, you could use other editors but my recommendation for you is the VSC (visual studio code).
Now I am going to explain you how to start VSC and create the new file for CSS if you know all of this, feel free to skip it. First go to visual studio code website and download it, then install it and open the app. Click on Open folder, create a empty folder and select it, click on new file and choose the file name but keep in mind that at the end you should type “.css” otherwise the file won’t work. I illustrate the steps by images for you.
Test and Result
You could add extension to your VSC to make it easier to use and same some time in coding or making your codes to run better. My recommended extension for you is Prettier, this extension organizes your code and makes it more readable and clean. The next extension is required for tutorial series it is Live server, it helps you by showing you the result of your codes on the page of search engine, so you get the idea of which piece of code how alters the visual result.
To add extension, go to extension section on VSC and search for it in the search bar then click on install and it will activated automatically.
