Week 9 — Navigation and Information Architecture

Sublime Text coding lab

Complete this coding task in Sublime Text, save the files using the names below, and open the HTML page in a browser to test it.

Today’s coding focus

Multi-page architecture, navigation consistency, relative links

Project files and folder structure

Create week-09/multi-page-site/ with index.html, about.html, work.html, css/styles.css, and optional assets/.

Syntax to practice

Relative paths (href="about.html"), shared navigation, semantic nav, unique page titles.

Build it

Expand the homepage into a three-page mini-site: Home, About, and Work/Services. Add consistent navigation to all pages, make every link work, and identify the current page accessibly.

Code along: Reuse navigation across three separate HTML pages.

Open in Sublime Text: index.html, about.html, work.html

Type the example below, save the file, and read the comments and selectors carefully. Use this as a starting point, then modify it for your own project.

<header>
  <a href="index.html">Portfolio Name</a>
  <nav aria-label="Main navigation">
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="work.html">Work</a>
  </nav>
</header>
<main><h1>Page-specific heading</h1><p>Content for this page.</p></main>

Complete HTML and CSS example

These are matching files. Create the folders shown below, save each code sample using the exact filename, and keep the stylesheet link consistent with your folder structure.

HTML file: index.html, about.html, work.html

<!-- Save a copy of this page structure in index.html, about.html, and work.html.
     Give each page its own title and main heading. -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Portfolio Name | Home</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header class="site-header"><a href="index.html">Portfolio Name</a>
    <nav aria-label="Main navigation"><a href="index.html">Home</a><a href="about.html">About</a><a href="work.html">Work</a></nav>
  </header>
  <main><h1>Home</h1><p>Introduce your portfolio here.</p></main>
  <footer><p>Contact: hello@example.com</p></footer>
</body>
</html>

CSS file: css/styles.css

body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6; color: #20242c; }
.site-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px; background: #20242c; }
.site-header a { color: white; }
nav { display: flex; flex-wrap: wrap; gap: 14px; }
main { max-width: 760px; min-height: 55vh; margin: auto; padding: 24px; }
footer { padding: 20px; background: #f1f5f9; }
@media (max-width: 600px) { .site-header { align-items: flex-start; flex-direction: column; } }

Important: The HTML links to css/styles.css. Keep that path correct relative to the HTML file.

Modify it

Create all three files, give each a unique title and heading, and click every navigation link.

Save and test

1. Save the file in the exact folder shown above.
2. Open the HTML file in a browser, or refresh it after saving if it is already open.
3. Check that linked CSS, images, and navigation work. If something fails, inspect filenames, capitalization, nesting, and relative paths.

Assignment and required deliverables

Submit every item below. Use the specified filenames and folder structure. A screenshot does not replace a required source file.

Required files

• multi-page-site/index.html, about.html, and work.html — three complete linked pages.
• multi-page-site/css/styles.css — one shared stylesheet.
• multi-page-site/site-map.pdf or .png — page hierarchy and navigation diagram.
• multi-page-site/README.txt — target audience and page hierarchy.

Submission checklist

• All pages link consistently; titles differ; no broken relative links; site map matches the site.
• Keep all HTML, CSS, image, text, and PDF files inside the named weekly or project folder.
• Open the HTML file in a browser before submitting and confirm linked CSS and images load.