Web development

Two-dimensional layout with grid-template-columns, rows, the fr unit, gap and placing items.

What CSS does and the three ways to add it to a page: inline, internal and external stylesheets.

Describe page layouts visually with grid-template-areas, and rearrange them at different widths.

How a CSS rule is built, comments, and reading errors in DevTools.

A practical comparison with examples of components and pages that suit each, and how they combine.

Target elements by type, class and ID, group selectors, and why classes are usually the right choice.

How each position value works, containing blocks, and sticky headers and sidebars.

How browsers decide which rule wins, calculating specificity, inherited properties, and why to avoid !important.

Why z-index sometimes does nothing: stacking contexts, what creates them, and how to debug layering.

Every way to write colour in CSS, transparency, and why oklch gives more predictable palettes.

Load custom fonts, avoid invisible text with font-display, self-host versus Google Fonts, and variable font axes.

Absolute and relative units, when to use each, and why rem is the usual choice for type.

Define and use custom properties, scope and inheritance, fallbacks, and theming with tokens.

How every element is a box, how its size is calculated, and margin collapsing.

Animate state changes smoothly with transition, timing functions, and properties that animate cheaply.

border-box versus content-box, width and height, min and max sizes, and the common reset.

Build multi-step animations with @keyframes, control them with animation properties, and respect prefers-reduced-motion.

How display changes layout behaviour, and a first look at flex and grid values.

Move, scale and rotate elements with transforms, the individual transform properties, and transform-origin.

Font families and fallbacks, size, weight, line height, letter spacing and text alignment for readable text.