learn.gisketch Full-Stack Engineering with AI Assistance
0 / 91
Week 2 · Day 9 of 91

Links, images, lists, and paths

HTML, CSS, Git, and the First Website

Objective

Connect pages and assets without broken relative paths.

HTML is the mechanical structure, CSS is the physical layout and finish, and Git is the revision history for every design change.

  • relative links
  • image alt text
  • ordered and unordered lists

Why this matters

A single page is a document. Two pages that link to each other are a site. Today you add the second page, wire navigation between them, and put in a picture and a list — and you do it without a single broken path, which is harder than it sounds and is the actual skill of the day.

Broken relative paths are the most common failure a beginner ships. The good news is that Day 3 already gave you the model: ., .., and "where am I standing?" Today you apply it inside HTML.

Links: the anchor element

A link is an <a> element — "anchor". The destination goes in an href attribute, and the text between the tags is what the visitor clicks.

<a href="about.html">About me</a>

Three kinds of href value, and the difference matters:

Form Example Resolved against
Document-relative about.html, images/board.jpg, ../index.html the folder the current page is in
Root-relative /about.html the root of the site
Absolute https://developer.mozilla.org/ nothing — it is complete already

Document-relative is what you want this week. Root-relative paths look tidy but break in two places you will hit: opening a file directly with file://, where / means the root of your whole disk, and on GitHub Pages (Day 14), where your site lives under username.github.io/repo/ rather than at the root.

Link text is part of accessibility, not decoration. Screen readers can list every link on a page out of context, so a page full of "click here" reads as a list of identical entries. Write the destination into the text: "Read the pump-controller writeup", not "click here".

An href is a net name

On a schematic you connect two points by giving them the same net label. The label is only a promise; if the other end does not exist, the design-rule check flags an unconnected net. href is that label, and the browser's 404 is the DRC report. Nothing verifies the connection for you at write time — you have to run the check.

Lists

Two list elements, and the choice between them carries meaning.

  • <ul> — unordered list. The order is not significant. Renders with bullets.
  • <ol> — ordered list. The order is significant: steps, rankings. Renders with numbers.

Both contain <li> (list item) elements, and <li> is the only thing allowed directly inside them.

<ul>
  <li>Embedded C</li>
  <li>Altium Designer</li>
  <li>Oscilloscope work</li>
</ul>

The conventional way to build navigation is a <nav> containing a <ul> of links — a screen reader then announces "navigation, list of 3 items", which is genuinely useful orientation.

Images and alt text

<img src="images/pump-board.jpg" alt="Prototype pump controller board with the MCU socketed" />

<img> has no closing tag. src is a path — the same three forms as href. And alt is not optional.

alt text should communicate the meaningful purpose or content of the image — what a person would lose by not seeing it. It is read aloud by screen readers, and it is what the browser displays if the file fails to load. So:

  • Good: alt="Prototype pump controller board with the MCU socketed"
  • Useless: alt="image", alt="IMG_2043.jpg", alt="photo of a board"
  • Wrong: leaving alt off entirely — a screen reader may then read the filename aloud, character by character.

One exception, and it is deliberate: if an image is purely decorative and adds no information, write alt="" — an empty string. That tells assistive technology to skip it. Empty is a real answer; missing is not.

Adding width and height attributes with the image's real pixel dimensions lets the browser reserve the right space before the file downloads, so text does not jump around as the page loads.

Alt text is a caption for someone on the phone

If you were describing this page over the phone, you would not say "there's an image here." You would say what is in it and why it is there. That sentence is the alt text.

Break it on purpose

Change one src to a filename that does not exist and reload. The alt text appears where the picture was. Now open DevTools → Network (Day 6) and find the request: status 404, "not found". That is the evidence trail for every broken path you will ever chase.

Walkthrough: the second page

In profile-site from yesterday:

mkdir images
touch about.html

Put an image file into images/ — any photo will do — and note its exact filename. Then write about.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>About — Your Name</title>
  </head>
  <body>
    <header>
      <h1>About me</h1>
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <section>
        <h2>Background</h2>
        <p>Electronics engineer, moving into full-stack development.</p>
        <img
          src="images/pump-board.jpg"
          alt="Prototype pump controller board with the MCU socketed"
          width="600"
          height="400"
        />
      </section>
    </main>
    <footer>
      <p>Your Name, 2025</p>
    </footer>
  </body>
</html>

Both pages sit in profile-site/, so href="index.html" and href="about.html" work from either. The image lives one level down, so src="images/pump-board.jpg" — no leading slash, no ../.

Now paste the same <nav> block into index.html, inside its <header>. Identical navigation on every page is what makes a site feel like a site.

Open index.html in the browser and click About. The address bar changes and the second page loads. Click Home and come back.

Checkpoint

Both links work in both directions, and the image renders. If you can also say why images/pump-board.jpg resolves the way it does — relative to the folder the page is in — the path model is in place.

Your turn

  1. Serve the site properly instead of using file://. From profile-site, run npx serve (Day 5). It prints a local address such as http://localhost:3000. Open that. Relative paths behave here the way they will in production.
  2. In index.html, add an unordered list of three or four skills inside the About section.
  3. Add an ordered list to the Projects section: three numbered steps of how you built one project. Ordered because the order matters — say so to yourself.
  4. Make each project name a link. Link to a real URL if you have one, otherwise link to about.html.
  5. Add the image to index.html too, with alt text written for that context.
  6. Check every link and image: click all of them, then open DevTools → Network, reload, and confirm no request has a red 404 status.
  7. Fix any 404 by reading the path, not by guessing. Ask: which folder is the page in, and where is the file relative to that?

Pair mode, only after step 6 finds something

Today's AI mode is pair programmer: you set one small task, the AI proposes, and you keep the judgement. Before you accept any change it suggests, inspect the diff, run the checks, and be able to explain the behaviour — accepting code you have not read is how bugs become permanent.

"Inspect my file tree and suggest the smallest path correction for broken links. Explain the path calculation."

If the fix it proposes rewrites three files, it has misread the problem. A wrong relative path is a one-line fix.

Common pitfalls

  • A leading slash. src="/images/board.jpg" works on some setups and breaks on GitHub Pages and on file://. Drop the slash unless you know you want site-root resolution.
  • Case. Board.JPG and board.jpg are the same file on a typical macOS or Windows disk and different files on the Linux servers that host your site. Use lowercase everywhere and be exact — this bug appears only after you deploy, which makes it maddening.
  • Spaces in filenames. my board.jpg needs my%20board.jpg in the path. Use hyphens instead.
  • Alt text that repeats nearby text. If the caption already says it, the image may be decorative — alt="" is then the right call.

Verify it yourself

Open today's reference, MDN's Structuring content with HTML, and find its pages on creating links and on images.

  1. MDN describes when to use an absolute URL rather than a relative one. Find its reasoning and write down one case from your own site where absolute is correct.
  2. Find MDN's guidance on alt text for images that are also links. Does it match what this lesson said about describing purpose?

Record both in notes/day-09.md, along with one link you had to fix today and the path calculation that fixed it.

The hour

  1. 0–5 min Recall

    Without notes, state yesterday’s main idea and one unresolved question.

  2. 5–20 min Learn

    Read only the listed concept notes and official reference sections needed today.

  3. 20–48 min Build

    Add an About page, project list, image with useful alt text, and working navigation between pages.

  4. 48–55 min Explain and verify

    Run the result, inspect evidence, and explain the data/control flow in your own words.

  5. 55–60 min Quiz and commit

    Complete the quiz, record one lesson, and commit the verified change when applicable.

What to hand in

Deliverable

Two linked pages with no broken local resources.

Working with AI today

AI as pair programmer

Define one small task, review the plan, inspect the diff, run checks, and explain every changed section.

Inspect my file tree and suggest the smallest path correction for broken links. Explain the path calculation.

References

End-of-day quiz

Q1 What should alt text communicate?
Q2 Which result best proves today’s work is complete?
Q3 Before accepting an AI-generated code change, what should you do?

Explain-back gate

Pass the quiz above to unlock completion.

Quiz + explain-back checks required.