Yesterday I finished a short course at Learnable titled "Build Your First Website: HTML & CSS". I wasn't a complete noob on HTML and CSS but my CSS skills were not good. I had to check StackOverflow for any simple line of CSS. So I started the course at Learnable, hoping it would be the last "Beginner CSS" course.
What I liked most about this course was its practicality: you would have to build a website just like this one. I learned a lot of stuff during that course. I finally learned why people use
meta tags on HTML and why this piece of code is everwhere:
- Base -
base.cssis used for the default, base rules of CSS.
- Layout -
layout.cssis used to divide the view into sections, such as rows and/or columns.
- Modules -
modules.cssholds the CSS for the modules of the view, such as features of a product, social media links, etc.
- State -
state.cssdefines how the modules or layouts will look when in a particular state.
- Theme -
theme.cssdefines how modules or layouts might look
Though, only 3 of them were used in this course: Base, Layout and Modules. Also, there is a 4th CSS file, called
normalize.css. Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
Another nice thing I learned was the usage of CSS sprites - merging some images into only one file, like this. I have heard of them before, I was aware of their existence, but this was the first time I used them. Even though merging some of your images into a single image file results in a file size bigger than the sum of the sizes of smaller images, it also results in less HTTP requests to download the images, thus in a webpage that loads faster.