Course outline
Full-Stack course / Tools and the web

Ship it: a pull request and a live URL

Project

How to fetch and submit this exercise

Once: install the tool and connect your account.

curl -fsSL https://gonomicon.com/install.sh | sh
gonomicon login

Each exercise: download it, edit the file named in the instructions, then submit.

gonomicon fetch fs-week-1/07-04-ship-it-pull-request-deploy
cd 07-04-ship-it-pull-request-deploy
gonomicon submit

The runner depends on the exercise: JavaScript/TypeScript/React labs run with Vitest, Python labs with pytest, and config-file labs (Docker, CI, Terraform, Nginx) are checked by parsing your file. gonomicon test runs the visible checks on your computer first; submitting also runs the hidden checks on our server.

Ship it: make the site safe to publish

Goal: fix a personal-site page so it still works when it is published in a subfolder like https://maya.github.io/portfolio/, then ship the real thing with a pull request and a live URL.

The problem

GitHub Pages serves a project site from a subfolder of the domain, not from the top. A link that starts with / means "the top of the whole domain", so it climbs right out of your repository's folder and lands on a 404.

Worked example, for a page published at https://sam.github.io/blog/:

href in the pageWhere it really goes
about.htmlhttps://sam.github.io/blog/about.html (works)
./about.htmlhttps://sam.github.io/blog/about.html (works)
/about.htmlhttps://sam.github.io/about.html (404, escaped the folder)
http://127.0.0.1:5500/about.htmlyour own computer, which nobody else can reach

What you edit

Two files sit next to each other: ship_it_pull_request_deploy.html and ship_it_pull_request_deploy.css. On your real site they are index.html and styles.css, so a link to either name counts as a link to the page. The starter page has several things that would break or embarrass it once it is live. Find them.

Rules

  1. The page links its stylesheet once, in the <head>, and the link still finds the CSS file when the site lives in a subfolder and when it lives at the top of a domain.
  2. Every href, src and form action either stays inside the site or is an https:, mailto: or tel: address. Nothing may point at localhost, 127.0.0.1, a private network address, file: or a folder on your own machine.
  3. No <base> tag. It would hard-code a folder name.
  4. Every link to a #section points at an id that exists on the page.
  5. The page has a real <title> (not a placeholder), exactly one <h1>, a lang on <html>, a charset meta tag and a viewport meta tag that does not lock zooming.
  6. Keep the structure: one <header>, one <nav> with at least three links, one <main>, one <footer>, and a heading inside every <section>.
  7. In the CSS, write it mobile-first. On a narrow screen the nav links stack in a column using flexbox. From a min-width breakpoint of your choosing (in rem or em, between 20 and 80) they sit in a row. Use only min-width queries.
  8. Links get a visible outline for keyboard users with :focus-visible. Never turn an outline off.
  9. CSS url(...) values and @import must not start with / or http:.

After the tests pass: ship your real site

This part is not graded, but it is the point of the project.

  • Put your finished site on its own branch, push it, and open a pull request into the default branch. Read the diff, then merge.
  • Publish with GitHub Pages or Netlify, then open the live address in a private window.
  • Check that the tab title and the <h1> match your index.html, and click every link.

What you'll practice

  • Spotting paths that only work on your own machine
  • Relative vs root-absolute paths
  • Pull request and deploy habits
  • Mobile-first flexbox and focus styles, again

Run it

gonomicon fetch fs-week-1/07-04-ship-it-pull-request-deploy
cd 07-04-ship-it-pull-request-deploy
gonomicon test
gonomicon submit

Hints

  1. Pretend your site lives at https://maya.github.io/portfolio/. A link that starts with / means the very top of maya.github.io, so it escapes your folder. Find every link that does that, and every address that only works on your own computer.
  2. Drop the leading slash on the stylesheet link and the Home link (or start them with ./ ). Use #about style links for sections on the same page. Anything with 127.0.0.1 or localhost has to go.
  3. Stylesheet href is just the css file name. Nav links: ./ then #about then #projects. Add lang="en" and a viewport meta tag, and give the page a real title. In the CSS: nav is a column by default, a row inside @media (min-width: 40rem), and a:focus-visible gets an outline.
PreviousNext lesson