Lab: Dress It Up

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

Add CSS to the webpage from last week’s Hello, Homepage lab, publish it with GitHub Pages, and check the stylesheet with the W3C validator.

Start

Continue in the lab-homepage repository from last week and open its folder in VS Code. If you need a fresh copy, use the lab-homepage template to create a repository named lab-homepage under your account, then clone it.

Add the Stylesheet

Create style.css beside index.html and link it from the page’s <head>. Add an obvious temporary rule, save both files, and reload the page to confirm that the stylesheet is connected. Remove or replace the temporary rule after the check.

Your final page must include:

Do not copy a finished design. Use the CSS reading when you need the syntax for a selector or rule.

Publish and Check

  1. Commit and sync the current files.
  2. On GitHub, open Settings → Pages.
  3. Under Build and deployment, choose Deploy from a branch, select the repository’s default branch and the /(root) folder, then save.
  4. Open the published URL and narrow the browser window to confirm that the @media rule changes the page.
  5. Open the W3C CSS Validator, choose By URI, enter the published URL, and fix style.css until it reports no errors.

Keep the GitHub Pages site live for Project 0. Gradescope checks the stylesheet link, CSS syntax, and required selectors in your submitted files. Use the browser and W3C checks above to confirm that the published page works and your style choices are visible.

Submit

  1. Commit and sync index.html, style.css, and any local assets.
  2. On Gradescope, choose GitHub and submit the lab-homepage repository and the branch containing your commit.
  3. Fix any failures, commit and sync again, then resubmit.