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.
- The file should exist and be named 00.html.
- Leave it empty on purpose.
- This page is the zero point for the sequence.
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.
- Include the doctype and the root html structure.
- Add head and body elements.
- Use a title in the format: your name, possessive, your animal, then the divider, then the page name.
- Add a favicon using your initials or another simple identifying mark.
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.
- The header should say that it is the header.
- The main should say that it is the main content area.
- The nav should come after the h1 in the header.
- The footer should say that it is the footer.
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.
- The h1 should identify the site.
- The nav should come after the h1 in the header.
- The h2 should identify the page.
- The paragraph in main should contain actual content, not filler.
- The footer should include something meaningful like "Designed by ..."
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.
- Do not remove the nav introduced in 03.html.
- The menu should link to all pages created so far.
- Use clear link text that matches the file names or page labels.
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.
- Use a real figure element, not just an image alone.
- Place the image inside the figure.
- Add a figcaption that explains the image.
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.
- Carry forward the favicon introduced in 01.html.
- Do not remove earlier additions as the pages progress.
- Keep the structure clean and ready for the next 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.
- Reset default margin, padding, and box sizing as needed.
- Keep the reset simple and understandable.
- Do not turn this step into full site styling yet.
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.
- Introduce yourself with meaningful content.
- Use a list with nested subbullets where appropriate.
- Keep the structure readable and logically grouped.
09.html: Link External CSS
Create a linked stylesheet and use it instead of keeping all styling inline or unstyled.
- Create a CSS file and link it from the head.
- Apply visible styling changes through that stylesheet.
- Keep the CSS organized and clearly named.
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.
- Reuse one shared header and one shared footer source.
- Apply that shared code only to the pages that actually use header and footer.
- Keep 00.html and 01.html minimal, and do not force later structure onto them.
Final Requirements
- Build eleven files total: 00.html through 10.html.
- Each file should add the next required concept, not skip ahead.
- Starting with 02.html, use header, main, and footer.
- Starting with 03.html, include the required h1 and h2 structure and add a nav after the h1 in the header.
- Starting with 04.html, the menu should link to all pages created so far.
- Use a figure with img and figcaption in 05.html.
- Include a meaningful title and favicon in 01.html.
- Add a CSS reset in 07.html.
- Build your introduction with subbullets in 08.html.
- Create and use a linked stylesheet in 09.html.
- Use code to share headers and footers in 10.html where headers and footers exist.
- All file names shall stay lowercase and use no spaces.