Lecture 01 · Foundations

What is HTML?

Beginner ~40 min No prerequisites

Introduction to HTML

HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web.

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>Welcome to <strong>HTML</strong>.</p>
</body>
</html>

🎯 Exercise 1.1

Create a simple HTML page with your name as the title, add a heading, and a paragraph.

Lecture 02 · Foundations

Document Structure

Beginner ~45 min Requires: Lecture 01

The HTML Boilerplate

boilerplate.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <!-- Content here -->
</body>
</html>

Lecture 03 · Foundations

Text & Typography

Beginner ~50 min Requires: Lecture 02

Headings Hierarchy

<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>

Lecture 04 · Foundations

Links & Navigation

Beginner ~45 min Requires: Lecture 03

The Anchor Tag

<!-- External link -->
<a href="https://example.com">Visit</a>

<!-- New tab -->
<a href="..." target="_blank" rel="noopener">Open New Tab</a>

<!-- Email -->
<a href="mailto:[email protected]">Email</a>

<!-- Anchor -->
<a href="#section">Jump</a>
<h2 id="section">Section</h2>

Lecture 05 · Foundations

Images & Media

Beginner ~50 min Requires: Lecture 04

Adding Images

<!-- Basic image -->
<img src="photo.jpg" alt="Description">

<!-- With dimensions -->
<img src="photo.jpg" alt="Description" 
     width="600" height="400">

<!-- Figure with caption -->
<figure>
  <img src="chart.png" alt="Chart">
  <figcaption>Figure 1: Sales</figcaption>
</figure>

Lecture 06 · Core Concepts

Lists & Tables

Beginner ~45 min Requires: Lecture 05

Three Types of Lists

<!-- Unordered -->
<ul>
  <li>Apples</li>
  <li>Bananas</li>
</ul>

<!-- Ordered -->
<ol>
  <li>Step 1</li>
  <li>Step 2</li>
</ol>

<!-- Description -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup</dd>
</dl>

Lecture 07 · Core Concepts

Forms & Inputs

Intermediate ~65 min Requires: Lecture 06

Basic Form

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">Submit</button>
</form>

Lecture 08 · Core Concepts

Semantic HTML

Intermediate ~55 min Requires: Lecture 07

Semantic Elements

<header>   <!-- Site header -->
<nav>      <!-- Navigation -->
<main>     <!-- Primary content -->
<article>  <!-- Self-contained -->
<section>  <!-- Thematic group -->
<aside>    <!-- Sidebar -->
<footer>   <!-- Footer -->

Lecture 09 · Advanced

HTML5 APIs

Intermediate ~60 min Requires: Lecture 08

Details & Summary

<details>
  <summary>What is HTML?</summary>
  <p>HTML is a markup language.</p>
</details>

Lecture 10 · Advanced

Accessibility

Intermediate ~50 min Requires: Lecture 09

ARIA Labels

<button aria-label="Close menu">X</button>
<nav aria-label="Main navigation">...</nav>

Lecture 11 · Advanced

SEO & Meta Tags

Intermediate ~40 min Requires: Lecture 10

Essential Meta Tags

<meta name="description" content="Page description">
<meta name="keywords" content="html, css, javascript">
<meta name="author" content="Your Name">
<meta property="og:title" content="Page Title">

Lecture 12 · Advanced

Capstone Project

Advanced ~90 min Requires: All Lectures

Build a Portfolio

Create a complete personal portfolio website using everything learned:

Semantic HTML structure
Navigation with links
Image gallery
Contact form
Proper meta tags