Module 01 — HTML, Git & CSS

What You'll Learn

Topic	Why It Matters
Semantic HTML5	Accessibility, SEO, and screen readers depend on it
Git & GitHub	Every professional dev team uses version control
CSS Fundamentals	Before Tailwind, you need to understand what it compiles to
CSS Grid & Flexbox	The two layout systems that power the modern web

Learning Objectives

By the end of this module you will be able to:

• Write semantic, accessible HTML that scores well in Lighthouse audits
• Use Git for version control: init, add, commit, push, branch, merge
• Open and resolve pull requests on GitHub
• Apply CSS properties for color, typography, spacing, and display
• Build layouts using Flexbox and CSS Grid
• Use CSS custom properties (variables) for maintainable styling

Module Lessons

1. HTML Fundamentals
2. Git Workflow
3. CSS Foundations
4. CSS Layout — Flexbox & Grid

Challenge

Refactor a poorly written website to be fully accessible:

• Replace <div> soup with semantic HTML (<header>, <nav>, <main>, <section>, <article>, <footer>)
• Add alt attributes to all images
• Fix heading hierarchy (one <h1>, logical sub-headings)
• Add a descriptive <title> and <meta description>
• Ensure color contrast meets WCAG AA standards

View Challenge →

Tools You'll Need

# Check your installs
node --version   # v20+
git --version    # any recent version
code --version   # VS Code