Lesson 2: Make Navigation Work

Yesterday you built the first version of a portfolio. Today we test whether the visitor can actually move through it.

A link has two parts:

• the label the visitor sees; and
• the destination the browser or site tool opens.

A label can be clear while the destination is wrong. A destination can be correct while the label is confusing. Both parts matter.

Relative thinking

Even when a website builder hides file paths from you, the same idea is underneath: one page points to another location.

Imagine this simple structure:

portfolio/
  index.html
  projects.html
  about.html
  images/
    banner.jpg

From index.html, a link to projects.html points to a file in the same folder. An image reference to images/banner.jpg points into a subfolder.

You do not need to memorize path syntax for every platform. You do need to understand the model: the browser must be able to locate the destination.

What broken navigation looks like

A navigation problem usually falls into one of these categories:

1. Wrong destination: the link points to the wrong page or file.
2. Missing destination: the page or file does not exist where the link expects it.
3. Permission failure: the destination exists, but the visitor is not allowed to open it.
4. Unclear label: the link works technically, but the visitor does not know what it means.
5. No return path: a visitor can enter a section but cannot easily get back.

Notice that only some of these are coding problems. Navigation is also an information-design problem.

Lab 1: Navigation test matrix

Create a small table with these columns:

Test at least six navigation actions.

Include:

• Home to Projects;
• Home to About;
• Projects back to Home;
• About back to Home;
• one future section or placeholder; and
• one media or file link if your platform supports it.

Do not just click randomly. Record the expected result before you test.

That turns activity into evidence.

Diagnose before editing

Suppose the Projects link does not work.

Weak troubleshooting:

It is broken.

Better troubleshooting:

The Home page loads, the navigation bar renders, and the Projects label is visible. Clicking Projects produces a not-found page. The failure is probably in the destination path or missing page, not in the entire site.

The better statement narrows the next check.

Before changing anything, ask:

• Does the destination exist?
• Is its name spelled exactly as expected?
• Is capitalization different?
• Is the link pointing to the correct location?
• Is access restricted?

Change one thing, then retest.

Link text should describe the destination

Avoid labels such as:

• Click here
• More
• Go
• This

Better labels describe the destination or action:

• View Data Projects
• Open Programming Portfolio
• Read About This Course

This matters for everyone, and it is especially important for people using screen readers or keyboard navigation. A list of links that all say “click here” provides almost no context.

Lab 2: Keyboard and clarity test

Without relying only on the mouse, move through your page using the keyboard if your platform supports it.

Check:

• Can you reach the navigation links?
• Is the focused element visible?
• Does Enter activate the expected link?
• Does the order make sense?

Then read each navigation label by itself. Ask whether someone could predict the destination without seeing the rest of the page.

Repair at least one problem, even if it is only a weak label.

Common failure: testing while logged in

A page may work for the creator but fail for everyone else because the creator has extra permissions.

If your school platform allows it, use a preview or approved viewer mode. If it does not, document that the permission test still needs teacher verification.

Do not make a page public just to prove the link works.

Evidence to keep

Save:

• your six-row navigation test matrix;
• the problem you found;
• the change you made;
• the retest result; and
• one improved navigation label.

Exit check

You should now be able to explain why “the link is broken” is not enough information. Name at least three different causes that could produce a failed navigation test.

Next lesson, we add media. The goal is not simply to make a photograph look different. The goal is to improve it for a specific use.