Front-End Developer



1. Overview

CSS defines how HTML elements are going to be displayed on the page. You can control pretty much everything about how HTML will appear, for example: colors, size, opacity, borders and etc.

2. Basic CSS Selectors

Learn how to target your HTML elements so that you can apply styles to them. For example, if you wanted every paragraph in your page to be red, you would write:

/* The selector p is going to target 
every paragraph element on the page.*/

p {
    color: red

At this point, focus on learning the most basic CSS selectors. We will tackle more advanced selectors later on in this module.

Basic CSS selectors you need to know:

  • Universal Selector
  • Element Selector
  • Class Selector
  • ID Selectors

3. Box Model

Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. - MDN web docs

@todo pic

Make sure you understand:

  • Content box
  • Padding
  • Border
  • Margin
More on: Google | Youtube

4. Display Property

Before diving into CSS Flex or Grid, it's important to understand the fundamentals of the display property.

5. Positioning

This article contains a great interactive demo explaining position:

More on: Google | Youtube

6. Flexbox

@todo pic

More on: Google | Youtube

7. Grid


8. Responsive layouts

Every serious project that you create should look good and be completely usable on all devices.

When creating responsive websites, you will apply everything you learned about flexbox and grids together with some new techniques to make sure your design will look good on any device.

New concepts:

  • Media Queries
  • Fluid Widths
  • rem units
  • Mobile First
  • Viewport meta tag
More on: Google | Youtube

9. Advanced CSS Selectors

@todo pic

alt text

10. Specificity


  • what CSS specificity is
  • how it is calculated
  • how it affects your page CSS.
More on: Google | Youtube