09 Debug and prepare a static release

Module 09 · 90–120 minutes, provisional

Before you begin: Module 08; a responsive page with meaningful HTML and a tested form demo.

By the end: Diagnose problems with evidence, package a portable static site, and explain hosting and release limits.

Turn “it looks wrong” into a testable question

A useful bug report includes an expected result, an observed result, and the conditions that reproduce the difference. “The site is broken” gives you little to test. “At a 320px viewport, the garden card makes the page scroll sideways after I added a long title” gives you a place to start. Reproduce one problem, make one small change, and test again. If the change does not help, undo it rather than building a pile of speculative fixes.

Walk through a missing style

Suppose all cards look plain after a new stylesheet was added. First confirm that styles.css exists beside index.html and the link href matches it. If a server is running, open developer tools’ Network panel and reload: a missing resource may show a 404 status. When opened as a file, the failure may appear differently. The key question is whether the browser received the intended CSS, not whether you can see the filename somewhere in your editor.

If the stylesheet loads, inspect a card. Does its class actually read event-card? A selector .event-cards with an extra s matches nothing. If the rule matches, check whether the property is crossed out by another declaration. Use the computed style view to find the value the browser finally used. If the value is right but the appearance is wrong, inspect dimensions and parent layout. You have now separated four distinct causes: loading, selection, cascade, and layout.

Try a reversible diagnosis

In a practice copy, change .event-grid to .events-grid in the CSS only. Reload and observe the loss of grid spacing or columns. Inspect the wrapper to see the actual class. Restore the selector and check again. Next add .event-card { width: 900px; } at the end of the stylesheet. At a narrow size, inspect the card’s box and the matching rule. Remove the fixed width, then verify that the overflow disappears. These failures have different causes even though both look like a layout problem.

Edits made directly in developer tools normally affect only the current loaded page. Copy a confirmed fix into your source, save, and reload to prove it persists. A browser may cache files; a reload that bypasses cache can help confirm a stale resource, but do not use cache as the first explanation for every mistake. Verify the path and saved contents first.

Validate structure as well as appearance

Browsers can repair malformed markup. Use an HTML validator or checker for issues such as duplicate ids, invalid nesting, and unsupported attributes. If using an online validator, remember that uploading or pasting a private page shares that content with the service. This project uses fictional data; do not submit a confidential page without permission. A clean validator result does not prove the writing, accessibility, or business behavior is correct.

Also check every local href, src, and form action. Open the site from its final copied folder, because a page can accidentally rely on a file outside the package. Confirm there are no absolute paths to your computer, missing assets, accidental real details, or promises of working bookings. Read the form result page too; it is part of the experience.

Use a local server when you are ready

The course does not require a server, but serving the folder over HTTP is a useful release rehearsal. If Python 3 is already installed, open a terminal in your project folder. Run the command below and visit http://127.0.0.1:8000 in your browser. The server remains running in that terminal until you stop it with Ctrl+C. If the port is busy, choose 8001 and use the matching address. Serve only the project folder; do not expose a home directory or secrets.

# macOS/Linux with Python 3 already installed:
python3 -m http.server 8000 --bind 127.0.0.1
# Windows with the Python launcher already installed:
py -m http.server 8000 --bind 127.0.0.1

Run one command appropriate to your system, not both. 127.0.0.1 is the loopback address on your own machine. Binding to it keeps this practice server local rather than deliberately listening on all network interfaces. This development server is not a production hosting service. If Python is not installed, continue with Open File; installing a runtime is not a requirement for this course. The next JavaScript course will explain why some fetch examples need a local server.

Understand deployment before doing it

Static hosting serves files such as HTML, CSS, images, and media. A domain name is a human-friendly address; hosting is where the files are served. HTTPS protects transport between browser and server, but it does not turn our practice form into a secure registration system. A successful upload does not prove all nested paths resolve. Sites hosted under a subdirectory especially benefit from the relative links we used.

Our release rehearsal stops before publishing. Prepare a folder containing index.html, styles.css, practice-result.html, and assets. Copy it to a new location, open it, and repeat the checks. A real release would additionally require choosing an authorized host, reviewing visibility and terms, uploading only intended public files, opening the public address, checking each resource and destination, and keeping a rollback copy. No paid account or public deployment is required here.

What to carry into JavaScript

HTML supplies meaningful content and native controls; CSS supplies presentation and responsive layout. The next course can enhance this same site with filtering, local saved event choices, and a clearly labeled synthetic form interaction. It should preserve the useful static page and not teach these foundations all over again. The event ids and category values are stable connection points, documented in the capstone handoff. A feature that needs a real database or real registration service remains a separate project decision.

Checkpoint: version 09 is the release candidate. Its rendered code is intentionally unchanged from version 08: the work here is diagnosis, portable packaging, and evidence. Complete the final assessment, then build the capstone from the brief before opening the reference solution.

Open the checkpoint source

The runnable-version link shows the result. To inspect or copy its source, use your editor’s Open Folder or Open File command and choose versions/09/index.html inside the extracted course folder. From module 04 onward, also open that version’s styles.css. Keep your own harbor-work folder separate. Compare a small section, then type or transfer it into the corresponding place in your own files; opening a reference does not update your project automatically.

Your next step

Attempt the three practice tasks, then use the separate explained solutions to compare reasoning. Open this module’s runnable version. Technical references are listed in the dated source register.