Color Formats and Models
10 Sub-topics
Understanding Color Theory for Web
RGB Color Model Explained
HSL Color Model Introduction
Modern Color Functions
9 Sub-topics
color() Function for Wide Gamut
inherit, initial, and unset for Colors
Color Accessibility
4 Sub-topics
System Colors and Accessibility
Color Contrast and WCAG Guidelines
Color Tools and Resources
CSS Units of Measurement
3 Topics
Absolute and Relative Units
8 Sub-topics
Understanding CSS Units Overview
Absolute Units – Pixels (px)
Absolute Units – Points and Picas
Absolute Units – Physical Units (cm, mm, in)
Relative Units – em Explained
Relative Units – rem Explained
em vs rem – When to Use Which
Viewport and Container Units
8 Sub-topics
Viewport Units – vw and vh
Viewport Units – vmin and vmax
Dynamic Viewport Units (dvh, dvw)
Small and Large Viewport Units (svh, lvh)
Container Query Units (cqw, cqh)
Line Height Units (lh, rlh)
CSS Math Functions
8 Sub-topics
Nested calc() Expressions
Fluid Typography with clamp()
Choosing the Right Unit for Each Property
Box Model Components
5 Sub-topics
Understanding the Box Model Concept
Padding – Adding Inner Spacing
Padding Shorthand Properties
Padding with Different Units
Border – Styling Element Boundaries
Border Shorthand Property
Border Radius – Rounded Corners
Creating Circles and Ellipses
Margins and Box Sizing
9 Sub-topics
Margin – Adding Outer Spacing
Margin Shorthand Properties
Margin Auto for Centering
Negative Margins Explained
Margin Collapse – Understanding the Behavior
Preventing Margin Collapse
box-sizing: content-box Explained
box-sizing: border-box Explained
Outline and Debugging
5 Sub-topics
Outline vs Border Differences
Box Model in Developer Tools
Debugging Box Model Issues