Web Development Foundations

1. How the web works

Every website you have ever looked at arrived the same way: your browser asked for it, and somewhere else in the world a machine answered. This lesson follows one request all the way from the moment you press Enter to the moment the page stops moving, naming each step and each protocol responsible for it. Once you can describe that journey, the vocabulary of web development — DNS, HTTP, status codes, the DOM, the critical rendering path — stops being jargon and becomes a map you can use to debug anything.

2. Your first HTML document

HTML is the language that gives content structure and meaning. This lesson builds a complete, valid document from nothing, explains what the browser does with each part of it, and covers the elements you will use in almost every page you ever write — headings, paragraphs, links, images, lists, tables and forms. By the end you can look at any page and describe its structure, and write a page of your own that a browser, a search engine and a screen reader will all understand the same way.

3. Semantic & accessible HTML

Two readers see every page you build: a person looking at a screen, and a program interpreting the markup. Semantic HTML is the practice of writing markup that serves both — elements whose names describe what the content *is*, so that browsers, search engines, translation tools and assistive technology can all agree on the structure. This lesson covers landmarks, the accessibility tree, ARIA, keyboard operation, colour contrast and the practical testing routine that tells you whether your page actually works for people.

1. CSS foundations

CSS describes how HTML should look — and, unlike most languages you will learn, it is deliberately declarative and forgiving. That forgiveness is exactly why it feels unpredictable to beginners: rules conflict, and the language has a precise, documented algorithm for deciding which one wins. This lesson teaches that algorithm (the cascade, specificity and inheritance), the box model that determines every size on the page, the units and values you should prefer, and the properties that do most of the work in real stylesheets.

2. Layouts with Flexbox & Grid

For fifteen years CSS had no layout system, and developers built columns out of floats and tables. Then two specifications arrived that were designed for the job: Flexbox, which arranges items along one axis, and Grid, which arranges them along two at once. This lesson teaches both properly — the axes and alignment model they share, the properties that belong to the container versus the item, when to choose which, and the handful of patterns that between them cover almost every interface you will ever build.

3. Responsive design

Responsive design is the practice of building one interface that is intentional at every width, from a 320-pixel phone held in one hand to a 32-inch desktop monitor. It is not a set of breakpoints; it is an order of work — content first, fluid by default, breakpoints only where the content demands them. This lesson covers the viewport, fluid type and spacing, the media and container queries that adapt the layout, responsive images, the user preferences you must respect, and the testing routine that tells you whether any of it actually works.

4. Ship your portfolio

A portfolio that lives on your laptop is not a portfolio. This lesson is the last one in the course and the first time your work has an address: you will put your files under version control, publish them to a host that serves them over HTTPS for free, attach a domain, and then go through the checklist that separates a page that renders from a page that is fast, findable, shareable and usable by anyone. Shipping is a skill, and like every skill it is a sequence of steps you can learn rather than a mood you have to be in.