Day 2; Advanced CSS & design fundamentals

This session will cover:

• Advanced CSS
  • Pseudo Selectors
  • Media Queries
  • Display type
  • CSS Frameworks
• Design Systems
  • Component Model
• Making CSS Easier
  • CSS Frameworks

Resources

Here are a list of the additional resources from the slides

Table of contents

• Positions
• Z-index
• Grid

Positions

The browser’s default positioning lays out all inline elements(e.g a, img, span) from left to right, and all block elements(e.g headers, div, p) from top to bottom.

Position allows us to specify the way the browser positions an element. By default, all element positions are set to static.

Good video about this

Z-index

The web is all boxes, and unfortunately they’re 3D. If something is overlapping use z-index to fix it

Also it’s recommended to add this to your CSS (box-sizing reference):

*{
    box-sizing: border-box;
    margin:0;
}

This will solve a number of styling problems you run into

Grid

Does what it says on the tin, let’s you create grids!

You can checkout a breakdown of CSS grids here