Five CSS concepts to master it
Learn these and you can build any beautiful web page that you want
The famous and essential CSS. For those who don’t know, CSS stands for Cascading Style Sheets and is used to add styles to elements of a markup language, like HTML. Think of CSS as the decoration of your page. Because of this, it is essential that the CSS is learned correctly, otherwise you will end up using the trial and error method. Your code will start to get quite messy. The styles which used to work before will start break, and after you google and copy and paste the solution, three new elements will break, and you not even know how this happened. So, to deep understand CSS, I chose 5 topics that I think are very important in any project:
Box Model
Firstly, the basic: every element in web design is a rectangular box. As a rectangular box, you can define and enjoy its properties, like: padding, margin and border. You will use these properties a lot.
Where you can learn it:
Display and Position
After you learn about box model, you can learn how to display and position its elements. The position property can help you manipulate the location of any element, and the display property is used to treat an element as a block or inline and the layout used for its children. Using these concepts you can do fun things, like: a fixed or sticky navbar, align your elements, overlapping elements, and other things.
Where you can learn it:
- Getting Started With CSS Layout by Smashing Magazine
- CSS Position by W3 Schools
- CSS Display by W3 Schools
Flexbox and Grid
These two are very important. Flexbox is a one-dimensional layout that offers better space allocation between elements and more robust alignment skills. With Grid you can manage columns and rows, so it is a two-dimensional layout of items on a page. You can choose which is better for your application, however it is interesting to use both. You can create a beautiful grid, and inside its sections you can use flexbox to align and manage its content.
Where you can learn it:
Responsive Web Design
Nowadays, almost all projects need to be responsive, i.e. look good on many devices as possible. So, keep that in mind in every project beginning and use media queries, rem units and responsive images to make your page responsive.
If you need examples of what is a great responsive web design: 11 powerful examples of responsive web design.
Where you can learn it:
- Responsive Web Design by ShayHowe
- Responsive Web Design Basics by WebDev
- Responsive Web Design by W3 Schools
Transitions and animations
Static pages with zero movement is kinda boring nowadays. You don’t need to add a lot of animations, just make sure that your animations are consistent with the content on the page. Simple hover and click events can turn a page a little more vivid.
Want examples? 30 Cool CSS Animation by Mockplus.
Where you can learn it:
That’s it. Now you know what to do, right? Yes, practice. Practice a lot.
Happy coding.
