🏠 Section 02. Home Page and Course Navigation

📝 Summary of What You Will Do in This Section

In this section, you will create the index.html file in your project root. This page is the home page for your CSS Motion Lab project, and it acts like a table of contents for all lesson pages you will build later. You are not adding animation code yet. Instead, you are building a strong HTML structure that your shared CSS file from Section 01 can style.

By the end of this section, your project will have a complete home page with headings, explanatory text, and links to all six lessons. In Section 03, you will build your first CSS animation lesson page, with JavaScript used only as a restart helper for testing motion.

✅ Checklist of What You Need to Do

  • Create index.html in the project root (same level as the css and js folders).
  • Type the full HTML for the home page into index.html.
  • Make sure the stylesheet link points to css/styles.css.
  • Confirm that lesson links point to the lesson files you will create in later sections.
  • Save your file and check that all opening and closing tags are correctly matched.

🧠 Core Concepts

This section teaches the idea of semantic HTML structure. “Semantic” means your tags describe what a part of the page is for, not just how it looks. For example, <header> tells the browser and other tools that this is the top identity area of the page. <main> tells us where the primary content lives. <section> breaks that main content into meaningful chunks. This makes your code easier to read, easier to maintain, and more accessible.

You are also setting up project navigation. Navigation is how users move through pages, and here you do that with links inside a list. Each <a> tag points to a future lesson file. Even if those files are not all built yet, writing the link structure now helps students understand the full project path from the beginning.

Another core concept is connecting HTML to CSS. In the <head> area, you include <link rel="stylesheet" href="css/styles.css" />. This is what applies your Section 01 styling rules to this page. Without this line, the page still works, but it appears plain because the browser has no custom visual rules to apply.

💻 Code You Will Write in This Section

HTML (index.html)

Create index.html in the project root and type this full file by hand. Do not paste it. Typing helps you learn tag names, nesting, and file-path patterns.

You are adding the entire home page now. In the next section, you will add js/main.js and create lesson-01-keyframes-basics.html.

Code image: s02-HTML

🔍 Key Concepts

The very first line, <!doctype html>, tells the browser to use modern HTML rules. The <html lang="en"> line declares the document language, which helps with accessibility and screen readers. Inside <head>, the charset and viewport tags prepare your page for proper text rendering and mobile-friendly layout. The <title> line sets the page name shown on the browser tab.

Inside <body>, the <header class="site-header"> area holds your site identity, including the project name and subtitle. The class names you use here, like site-header, wrapper, brand, and subtitle, match styles you already built in css/styles.css. This is an important connection: HTML provides structure and class hooks, while CSS provides visual styling.

In <main class="wrapper">, the page introduces the course and then lists lesson links. The <ul class="toc"> contains link items that point to each lesson file. This is your navigation map for the full project. Near the bottom, the pager block gives students a clear “Next” action so they move into Lesson 1 in order. Together, these lines create a home page that is both informative and easy to navigate.