Foundations

Introduction to HTML & CSS

HTML gives a document meaning. CSS gives it a visual system. You will learn both properly, including semantics, accessibility, the box model, Flexbox, Grid, and responsive design, by building a portfolio website you keep using afterward.

The course project

Personal Portfolio Website

Home, About, Projects, Writing and Contact pages. Responsive, accessible, and deployed. You build it across the whole course rather than at the end.

course

14 modules · 29 lessons

Each module ends with a practice test, a graded build, and a step of the course project.

Part I: Structure

How a Web Page Works

Three languages, three jobs. Knowing which does what prevents most beginner confusion.

Elements, Tags, and Attributes

The vocabulary of HTML: how an element is written, nested, and configured.

Text and Document Hierarchy

Headings are an outline, not a font size menu. Getting that right changes who can use your page.

Links, Navigation, and Images

The hyperlink is what makes the web a web. Used carelessly it is also what makes a site unusable.

Lists, Tables, and Semantic Structure

Most content is a list, a table, or a named region. Marking it up honestly is what makes it navigable.

Section project · coming soon

A Page That Says Who You Are

One semantic page about you: headings, lists, links and an image with honest alt text, no styling.

Part II: Presentation

CSS Syntax, Selectors, and the Cascade

Not which properties exist, but how the browser decides which rule wins.

Color, Units, and Typography

The three decisions that make a page look designed rather than defaulted.

The Box Model and Spacing

Every element is a box. Once you can see the boxes, layout stops being guesswork.

Flexbox

One axis, distributed space. This is what you reach for nine times out of ten.

CSS Grid and Layout Patterns

Two axes at once. Grid is for page layout, Flexbox is for the pieces inside it.

Section project · coming soon

A Recipe Card

Style a single recipe: type system, box model, a flex header and a grid of ingredients.

Part III: Systems

Responsive Design

Not a phone version of your site. One site that works at every width.

Forms and Interactive States

The part of a page people actually operate. Get it wrong and nobody can reach you.

Custom Properties, Transitions, and Motion

A design system in variables, and motion that helps rather than shows off.

Architecture, DevTools, and Shipping

Organize it so you can still read it in six months, then put it on the internet.

Section project · coming soon

The Portfolio Site

A multi-page portfolio, built from the HTML & CSS systems you have learned: shared design tokens, responsive layout and a usable contact form.

All courses