E-Learning Platform

Web Foundation I

Learn how the basic web works by building it yourself: HTML structure, CSS styling, and JavaScript interactivity. No prior experience required — just a browser and a phone or laptop.

Your progress

0 / 40 concepts mastered

  • Not started
  • In progress
  • Mastered
Continue where you left off

Unit 1 — HTML: The Frame

The skeleton every web page is built on: elements, structure, links, images, and semantics.

  1. How the Web Works
    • Clients & servers
    • URLs
    • What HTML is
  2. Your First Page
    • Elements & tags
    • Nesting elements
    • html, head, and body
  3. Headings & Paragraphs
    • Heading elements
    • Paragraphs
    • Emphasis
  4. Lists
    • Unordered lists
    • Ordered lists
    • List items
  5. Links
    • The anchor element
    • The href attribute
    • Relative vs. absolute paths
  6. Images
    • The img element
    • The src attribute
    • Alt text
  7. Structure & Semantics
    • Semantic sectioning elements
    • The div element
  8. Page Anatomy
    • The doctype declaration
    • Head metadata
    • The title element
    • The lang attribute
  9. Unit project: About Me page

Unit 2 — CSS: The Finish

The paint, trim, and surfaces on the frame Unit 1 built: selectors, colors, the box model, flexbox layout, and responsive styling.

  1. Selectors & the cascade
    • CSS rules
    • Class selectors
    • The cascade
  2. Colors & units
    • Color values
    • Length units
  3. Text styling
    • Font properties
    • Text alignment
  4. The box model
    • The box model
    • Padding
    • Margin
  5. Flexbox layout
    • Flexbox containers
    • Flexbox alignment
  6. Spacing & alignment
    • The gap property
    • Flex wrap
  7. Mobile-first & media queries
    • Mobile-first styling
    • Media queries
  8. Unit project: style your About Me page

Unit 3 — JavaScript: The Wiring

Coming soon

Outlined only for now — no concepts or lessons exist yet.

  1. Values & variablesComing soon
  2. Types & operatorsComing soon
  3. FunctionsComing soon
  4. ConditionalsComing soon
  5. Arrays & loopsComing soon
  6. Selecting DOM elementsComing soon
  7. Changing the pageComing soon
  8. EventsComing soon
  9. Unit project: make your page interactiveComing soon