Box Model (DEMO)

CSS Basics

VIDEOS

EPISODE 1
What is CSS?
What is CSS and what do we use it for?
EPISODE 2
Three ways to write CSS
The three different ways to write and practice CSS
EPISODE 3
CSS Selectors in 1 Minute
Basic CSS selectors like ELEMENT, CLASS, and ID
EPISODE 4
Colors
How do Colors work in CSS?
EPISODE 5
Colors (DEMO)
Live Coding: CSS Colors
EPISODE 6
Absolute Sizes
What is Absolute sizing in CSS and when to use it?
EPISODE 7
Relative Sizes
What are relative sizes in CSS and when are they used?
EPISODE 8
EM & REM
The two most commonly used relative sizing metrics in CSS
EPISODE 9
Sizing (DEMO)
Live Coding: CSS Sizing
EPISODE 10
CSS Box Model
The most important foundation of every HTML element: Box Model
EPISODE 11
Box Model (DEMO)
Live Coding: Box Model
EPISODE 12
Fonts
How to use system and custom Fonts in CSS
EPISODE 13
Fonts (DEMO)
Live Coding: CSS Fonts

Last Updated: February 4, 2023

Box Model (DEMO)

Live Coding: Box Model

Here's a demo of the Box Model concepts we discussed in the last video. Be sure to experiment with all the properties and really understand the difference between Padding and Margin.

Next, we're going to discuss Fonts. See you there.