Web Development Fundamentals

The boilerplate every page starts with: DOCTYPE, html, head, body, title, and meta.

Build a complete About Me page in the playground from the skeleton, headings, paragraphs, and emphasis.

Anchor tags, the four kinds of URL, image attributes, performance hints, and security essentials.

Ordered and unordered lists, and the nav pattern every real website uses.

The landmark elements — header, main, footer, article, section, aside — that give a page meaning.

Data tables with proper headers, captioned figures, and native video and audio players.

Build a semantic blog page with a nav, an article, an image, a link, and a list in the playground.

Form structure, label association, and why server-side validation is non-negotiable.

The right input type for every field, plus textarea, select, and grouped controls.

Button types, what submit does, and the difference between a link and a button.

Build a complete, accessible signup form in the playground from labels, input types, a select, and a submit button.

What CSS is, the three ways to add it, and the rule syntax every style is written in.

Element, class, and ID selectors; specificity; and the cascade that decides conflicts.

Naming colors (named/hex/rgb) and sizing with px, rem, em, and percentages.

Content, padding, border, margin — and why box-sizing: border-box changes everything.

Style hover, focus, and active states, and target elements by position with :first-child and :nth-child.

Style a real card component from scratch with selectors, colors, units, the box model, and a hover state.

HSL colors and the hue wheel, CSS custom properties, font stacks, unitless line-height, and WCAG contrast.

Block vs inline elements, the display property, inline-block, and how the browser lays elements out by default.

One-dimensional layouts: navbars, card rows, centering, and the main/cross axis model.

flex-wrap for rows that don't fit, and flex-grow / flex-basis / the flex shorthand for sharing space.

Two-dimensional layouts: columns, rows, gap, the fr unit, spanning, and responsive grids.

position: relative, absolute, fixed, and sticky; the offset properties; and z-index stacking order.

Build a page section with a Flexbox navbar, a Grid card gallery, and a pinned badge in the playground.

Background images and gradients, border-radius, box-shadow, overflow, and object-fit.

Animate state changes with transition, move and scale elements with transform, and respect reduced-motion preferences.

Turn a plain profile card into a finished component with a gradient, a circular avatar, a shadow, and animated hover states.

Mobile-first CSS, the viewport tag, media queries, fluid images, and a centered content column.

Semantic HTML as the foundation, keyboard access, visually-hidden text, and the two ARIA attributes you actually need.

HTTPS, the three HTML-level rules you already know, what cross-site scripting is, and the security headers a host sets.

Using the browser's built-in DevTools to inspect elements, tweak CSS live, read errors, and test responsiveness.

Static hosting, the pre-flight checklist, the path gotcha that breaks deployed sites, and the head tags that make a site look right when shared.

Build a complete, semantic, styled, responsive, accessible landing page from a spec, using every module of the course.