A simple three-page navigation project teaches you to connect files deliberately. Create Home, About, and Contact pages, each with a matching nav list. Use this as a chance to build something rather than just read about it. There is no need to remember every tag immediately.
What You Need to Know
Use relative file paths, one active-page indicator per menu, and predictable heading titles. Test each link starting from every page, not only the homepage.
Example: See It in Action
Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
project/
index.html
about.html
contact.html
<!-- Use relative links between the three pages. -->Let’s Understand the Example
Follow the example from top to bottom. The indentation shows which information belongs together. Each line has a job, even when the browser does not draw it as something visible.
Look for the text “project/ index.html about.html contact.html” in the page. If the visible result surprises you, inspect the rendered elements to see what the browser actually built.
What Should You See?
The page should include “project/ index.html about.html contact.html”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.
Try to explain the example to someone else in two sentences. If one line is mysterious, inspect that line instead of copying it blindly.
Try It Yourself
- Build the menu on all three pages and click through every route.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Making navigation work only from index.html because other pages are in different folders.
- A page may appear fine while containing mistakes. Inspect the source and use a validator to check what you wrote.
Key Takeaways
- A simple three-page navigation project teaches you to connect files deliberately.
- Focus on what the browser does with the markup, not just how the example looks.
- Use relative file paths, one active-page indicator per menu, and predictable heading titles. Test each link starting from every page, not only the homepage.