Lab: Dress It Up

Due: Wednesday, September 16 at 11:59pm (one week after it is assigned) · Worth: 4 points

Style your homepage so visitors can read it comfortably on a laptop or phone, then publish an address they can visit.

Start

Open your existing lab-homepage repository in VS Code. If you need another local copy, clone your own repository. Finish the HTML lab first if needed.

Connect the Stylesheet

Open style.css beside index.html and check that the page’s <head> links to it. Try an obvious temporary style, save, and reload to confirm the connection; then replace it with your design. Keep an external stylesheet link to style.css in the finished page. Use the CSS reading for syntax.

Emphasize Useful Content

Choose which content should share a style and which element needs its own treatment. Include:

Put at least one declaration inside each required rule. Check the matching HTML when a rule has no effect.

Hovering and Narrow Screens

Add a :hover rule and an @media rule using min-width or max-width. Hover over the chosen element, then resize the window across your chosen width to check both styles. Make your own design rather than copying a finished page.

Publish and Check

  1. Commit and sync the files. On GitHub, open Settings → Pages.
  2. Choose Deploy from a branch, the repository’s default branch, and /(root), then save.
  3. Wait for deployment in Actions, then open Visit site from Settings → Pages. For a 404, check that index.html is at the top level of the selected branch and deployment has finished.
  4. Enter the published URL in the W3C CSS Validator under By URI and fix any errors. While deployment is pending, use By direct input with your CSS.

Keep the site live for Project 0. After edits, commit and sync again and wait for deployment before checking the public page. Gradescope checks the stylesheet link, CSS syntax, and required rules in your files. Publishing, hovering, resizing, and W3C validation are self-checks.

Submit

Commit and sync index.html, style.css, and local assets. On Gradescope, choose GitHub and submit lab-homepage and the branch containing your work. See the first lab for the submission and resubmission steps.

Grading Rubric

Gradescope checks each item separately and adds the points earned.

Total: 4 points.