First HTML Instructions

Overview

Start by creating a subfolder named tenpages inside your main working folder. Inside that subfolder, build a series of eleven HTML files named 00.html through 10.html. The early files should show steady, minimal progress from a totally empty file to a page with structure, headings, and navigation.

00.html: Empty File

Create a completely blank file. It should contain no HTML structure, no text, and no visible content.

01.html: Bare Minimum Page

Add only the basic HTML required for a valid page. It should still appear blank in the browser, but it must have a meaningful title and a favicon.

02.html: Header, Main, And Footer

Add the three major structural elements: header, main, and footer. Put place a nav after the h1 inside the header, place a paragraph inside main, and add something meaningful in the footer such as a design credit.

03.html: First Real Content

Add the required h1 and h2 elements, add a nav after the h1 inside the header, place a paragraph inside main, and add something meaningful in the footer such as a design credit.

04.html: Expand The Navigation

Keep the nav in the header and expand it so it links to all pages created so far in the sequence.

05.html: Add A Figure

Add a figure element that contains an image and a figcaption. This is the first page in the sequence that should present image content in a semantic way.

06.html: Continue Building Carefully

Continue from the earlier pages without adding a brand-new major feature at this step. Keep the favicon and earlier structure in place while preparing for the later styling and content steps.

07.html: Add A CSS Reset

Introduce a CSS reset so the page starts from a more controlled base. This step is about normalizing browser defaults before heavier styling begins.

08.html: Add Your Introduction

Create your introduction content and include subbullets where needed. This page should show a real content structure rather than placeholder notes.

09.html: Link External CSS

Create a linked stylesheet and use it instead of keeping all styling inline or unstyled.

10.html: Reuse Shared Header And Footer Code

Use code to include common headers and footers across all pages that have them. Do not retrofit shared header and footer code into the earlier files that intentionally had no header or footer.

Final Requirements

  1. Build eleven files total: 00.html through 10.html.
  2. Each file should add the next required concept, not skip ahead.
  3. Starting with 02.html, use header, main, and footer.
  4. Starting with 03.html, include the required h1 and h2 structure and add a nav after the h1 in the header.
  5. Starting with 04.html, the menu should link to all pages created so far.
  6. Use a figure with img and figcaption in 05.html.
  7. Include a meaningful title and favicon in 01.html.
  8. Add a CSS reset in 07.html.
  9. Build your introduction with subbullets in 08.html.
  10. Create and use a linked stylesheet in 09.html.
  11. Use code to share headers and footers in 10.html where headers and footers exist.
  12. All file names shall stay lowercase and use no spaces.