Skip to content
አማርኛEnglish

Theme

ይህ ገጽ ገና ወደ አማርኛ አልተተረጎመም፤ ስለዚህ በእንግሊዝኛ ቀርቧል። የእንግሊዝኛውን ገጽ ክፈቱ

በቅርቡ

Web Foundations

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

  • 12 ክፍሎች
  • 12 ትምህርቶች
  • 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

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?በቅርቡ
  2. , coming soon
    2Semantic HTMLDocument structure, head metadata, headings, lists, and semantic tags.
    1. 2.1HTML elements and structureበቅርቡ
  3. , coming soon
    3CSS basics and box modelSelectors, the box model, margins, padding, and typography.
    1. 3.1The CSS box modelበቅርቡ
  4. , coming soon
    4Flexbox and grid layoutsModern 1D and 2D layouts using CSS Flexbox and CSS Grid.
    1. 4.1Flexbox and grid in practiceበቅርቡ

Currents

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 layoutsበቅርቡ
  2. , coming soon
    6JavaScript fundamentalsVariables, types, control flow, functions, and modern ES6+ features.
    1. 6.1Variables and functions in JSበቅርቡ
  3. , coming soon
    7The DOM and eventsSelecting elements, manipulating nodes, and listening for user interactions.
    1. 7.1Handling user eventsበቅርቡ
  4. , coming soon
    8Forms and validationAccessible form controls, native validation, and custom JS error states.
    1. 8.1Accessible interactive formsበቅርቡ

Deep Water

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 dataበቅርቡ
  2. , coming soon
    10Accessibility (a11y)WCAG standards, keyboard navigation, focus indicators, and ARIA roles.
    1. 10.1Building accessible interfacesበቅርቡ
  3. , coming soon
    11Tooling and static deploymentsGit version control, local dev servers, and deploying to static CDNs.
    1. 11.1Deploying to the webበቅርቡ

Landfall

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 (ፕሮጀክት)በቅርቡ

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