CSS Fundamentals

Getting Started with CSS

CSS · Session 1

The Box Model & Display

CSS · Session 2

Typography & Colors

CSS · Session 3

Cascade, Specificity & Pseudo-classes

CSS · Session 4

Flexbox I — The Basics

CSS · Session 5

Flexbox II — Real Patterns

CSS · Session 6

Positioning

CSS · Session 7

Grid I — Rows and Columns

CSS · Session 8

Grid II & Responsive Design

CSS · Session 9

Putting It All Together

CSS · Session 10 · Capstone

CSS Custom Properties (Variables)

Instead of retyping the same color or spacing value in twenty different places, define it ONCE as a variable — change the one definition, and every place using it updates automatically.

Transitions & Hover Effects

Without a transition, a style change on :hover happens instantly — like a light switch. With transition, the same change becomes a smooth glide instead of a jarring jump.

Keyframe Animations

A transition animates between two states triggered by something (like :hover). A keyframe animation is a full choreographed sequence that can run automatically, loop forever, and move through many steps — no trigger required.

2D Transforms

transform lets you move, resize, rotate or skew an element visually — without pushing any of the surrounding content around, and cheap enough for the browser to animate smoothly.

Gradients, Shadows & Filters

Flat single colors are fine, but a bit of depth and light goes a long way. Gradients, box-shadow, text-shadow and filter are the tools that add that final layer of visual polish.