Skip to content
አማርኛEnglish

Theme

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
  • Free to learn

This course is being written. Its lessons will be free here, like every lesson on Mawj. 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

Modules 1–4, 4 lessons

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

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

Currents

Modules 5–8, 4 lessons

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

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

Deep Water

Modules 9–11, 3 lessons

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

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

Landfall

Module 12, 1 lessons

Capstone project: A complete responsive, accessible web app.

  1. , coming soon
    12Capstone: Connected web appBuild and deploy a responsive, accessible web application that connects to an API.
    1. 12.1Building the capstone web app (Project)Soon

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