Skip to content
Start learning
Coming soon

Web Foundations

Build beautiful, accessible, and responsive websites from scratch without framework overhead, mastering the core languages of the browser.

  • 12 modules
  • 12 lessons
  • Shallows to Landfall
  • Video + reading

This course is being written. The outline below is what it will teach; follow the Telegram channel to hear the day it opens.

Get notified on Telegram

What you'll be able to do

  • Write semantic, accessible HTML that search engines and screen readers love
  • Build CSS layouts with Flexbox, CSS Grid, and custom properties
  • Bring pages to life with modern vanilla JavaScript and DOM APIs
  • Connect frontends to web APIs using fetch and async/await

The full syllabus

12 modules, from the Shallows down. Open any module to see its lessons.

The Shallows

How the web works, semantic HTML, and CSS styling fundamentals.

  1. 1How the web worksBrowsers, servers, HTTP, DNS, and page rendering cycles.
    1. 1.1What happens when you open a URL?Soon
  2. 2Semantic HTMLDocument structure, head metadata, headings, lists, and semantic tags.
    1. 2.1HTML elements and structureSoon
  3. 3CSS basics and box modelSelectors, the box model, margins, padding, and typography.
    1. 3.1The CSS box modelSoon
  4. 4Flexbox and grid layoutsModern 1D and 2D layouts using CSS Flexbox and CSS Grid.
    1. 4.1Flexbox and grid in practiceSoon

Currents

Responsive design, JavaScript syntax, the DOM, and interactive forms.

  1. 5Responsive designMedia queries, mobile-first workflows, and fluid typography.
    1. 5.1Mobile-first layoutsSoon
  2. 6JavaScript fundamentalsVariables, types, control flow, functions, and modern ES6+ features.
    1. 6.1Variables and functions in JSSoon
  3. 7The DOM and eventsSelecting elements, manipulating nodes, and listening for user interactions.
    1. 7.1Handling user eventsSoon
  4. 8Forms and validationAccessible form controls, native validation, and custom JS error states.
    1. 8.1Accessible interactive formsSoon

Deep Water

Async JavaScript, fetch, accessibility standards, and modern tooling.

  1. 9fetch and async JavaScriptPromises, async/await, and fetching JSON data from remote servers.
    1. 9.1Fetching remote dataSoon
  2. 10Accessibility (a11y)WCAG standards, keyboard navigation, focus indicators, and ARIA roles.
    1. 10.1Building accessible interfacesSoon
  3. 11Tooling and static deploymentsGit version control, local dev servers, and deploying to static CDNs.
    1. 11.1Deploying to the webSoon

Landfall

Capstone project: A complete responsive, accessible web app.

  1. 12Capstone: Connected web appBuild and deploy a responsive, accessible web application that connects to an API.
    1. 12.1Building the capstone web appProjectSoon

Who it's for

  • Complete beginners wanting to learn front-end web development
  • Backend engineers looking to understand how the browser really works
  • Designers wanting to translate mockups into clean, production code

What you need

  • A computer with any modern web browser (Chrome, Firefox, Safari)
  • A code editor like VS Code installed

Web Foundations is coming

Enrollment opens when the first modules are ready. The channel announces it first.

Get notified on Telegram

What it will include

  • Video walkthroughs of every layout technique
  • Interactive browser exercises and responsive design challenges
  • Private Telegram community with direct instructor design reviews