Free course · Lesson 1 of 5

Foundations of the Web (HTML5 & CSS3)

In this lesson you will

Write a semantic HTML page
Style it with CSS and custom properties

Modern websites are built with semantic HTML5 tags (<header>, <nav>, <article>, <section>, <footer>) that describe the meaning of content, not just its appearance. CSS3 brings style with custom properties (variables), rounded corners, flex layouts, and modern system fonts — no more complex hacks.

Use semantic tags for better accessibility and SEO.
CSS custom properties (--color-primary: #1D448A) keep themes consistent.
Modern system font stacks (system-ui, sans-serif) load instantly.
Browsers in 2026 fully support Grid, Flexbox, and border-radius.

Worked exampleCard Component

HTML

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Card Demo - Rescue Academy</title>  <style>    :root {      --color-primary: #1D448A;      --color-accent: #F2C035;      --radius: 12px;      --font: system-ui, -apple-system, sans-serif;    }    * { margin: 0; box-sizing: border-box; }    body {      font-family: var(--font);      background: #f0f4f8;      display: flex;      justify-content: center;      align-items: center;      min-height: 100vh;      padding: 1rem;    }    article.card {      background: white;      border-radius: var(--radius);      padding: 2rem;      max-width: 360px;      box-shadow: 0 4px 20px rgba(0,0,0,0.08);    }    .card h2 {      color: var(--color-primary);      font-size: 1.5rem;      margin-bottom: 0.5rem;    }    .card p {      color: #374151;      line-height: 1.6;      margin-bottom: 1rem;    }    .card .badge {      display: inline-block;      background: var(--color-accent);      color: #111;      padding: 4px 12px;      border-radius: 999px;      font-size: 0.8rem;      font-weight: 600;    }  </style></head><body>  <article class="card">    <h2>Rescue Academy</h2>    <p>Where Quality is Achieved. Build practical skills for the digital economy in South Sudan.</p>    <span class="badge">Free Online Learning</span>  </article></body></html>

Practice exercise

Build a one-page profile for a local shop or group with a header, three sections and a footer, styled with a small set of custom properties.

Key takeaways

Semantic elements give structure that people and machines understand
CSS custom properties keep colours and spacing consistent
Keep content in HTML and appearance in CSS

In the full program Module 1: HTML for Structured Web Pages See how this topic is taught in depth, with practical activities and an assessment.

Free self-study lesson — no certificate. For the full instructor-led program, see registration options.