Mastering Front-End Development - Stage 4: Advanced CSS - Enhancing Styling Skills
Rami Mo
After learning the basics of HTML, JS, and CSS, we are one step closer to creating beautiful and functional web pages. We will learn how to make a web page responsive so it looks good on different screen sizes, animate elements, and work with more complex CSS selectors.
Introduction to the CSS box model And CSS Box Model
Box sizing in CSS controls how element sizes are calculated, deciding if padding and borders are part of the total width and height. It's essential for consistent, responsive layouts and helps prevent layout issues.
CSS layouts
We use different layout methods to structure our pages. Interestingly, in the early days of web development, tables were used for styling page layouts. Nowadays, with improvements in web standards, our job is much easier thanks to flexbox and grid.
Introduction to CSS layouts
At the beginning, we focus on learning how layouts work and how elements are treated on a web page from top to bottom and left to right.
Flex
In flexbox, we introduce another axis to move elements to desired positions. Pay attention to these resources and learn them, as they are important.
-
This is an excellent resource with visualizations for learning flexbox. Read through all the sections carefully and try to practice them simultaneously.
flexboxfroggy (A game to practice your flexbox knowledge)
And more resources if you want to dig dipper
Grid
CSS Grid Layout is a two-dimensional system for organizing content into rows and columns. It simplifies creating complex layouts and makes the process more enjoyable.
-
This is an excellent resource with visualizations for learning Grid. Read through all the sections carefully and try to practice them simultaneously.
In the near future, when we learn to work with other CSS libraries like Bootstrap or Tailwind, our job will be much easier since they handle most of the hard work for us. However, understanding what is happening under the hood is crucial, so consider reading these resources as well.
Grid Garden (A game to practice your grid knowledge!)
Responsive design
We need our websites to be accessible and look good for all users on different screen sizes. We achieve this by considering various layouts, spacing, widths, heights, and more. We choose specific screen sizes in our styles and apply styles tailored to each screen size.
Responsive design (an introduction)
Responsive Web Design Tutorial (A hands on video tutorial)
Understanding and practicing CSS responsive design techniques are necessary and crucial, so consider reading these resources as well.
Learn CSS: Responsive Design (course)
Learn Responsive Design (article series)
Advanced Selectors and Pseudo-Classes
To style pages correctly and display user interactions, we need to select different elements based on various conditions and in response to the state of other elements. we will achieve this by combining and using different selectors.
A CSS pseudo-element is a keyword added to a selector to style a specific part of an element. For example, it can style the first letter of a paragraph, insert content before or after an element, or highlight text. Pseudo-elements allow precise and creative design without changing the HTML structure.
flukeout.github.io (A game to practice CSS selectors!)
Pseudo-elements (::after and ::before)
Animations and Transitions
We will use animations and transitions in our code to provide a pleasant and smooth experience for our web app users.
To be continued
In this post, we covered more advanced parts of CSS. In the upcoming parts, we will dive deeper into more advanced topics. Stay tuned for the next part, where we will continue to expand our knowledge and explore these exciting topics in greater detail.
Don't miss the next part by subscribing to my newsletter.
Subscribe to my newsletter
Read articles from Rami Mo directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by