Lab: Dress It Up

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

Last week you built Hello, Homepage, a well-formed but unstyled page with black text, a white background, and the browser’s default font. Today you will style it with CSS and publish it at a URL you can share.

Starter code: continue your own homepage repo from last week, or start fresh from github.com/rtealwitter/lab-homepage.

Reopen your lab-homepage folder in VS Code (File → Open Folder…) and pull up index.html. Everything below builds on what is already there.

CommitStrip comic: a developer scoffs that 'nobody needs a front-end dev anyway,' and the final panel reveals the result -- a teetering wall of unstyled div, input, and br tags.

Wire up a stylesheet

CSS lives in its own file. In your lab-homepage folder make a new file called style.css, the same folder as index.html, so the two are siblings. Link it from the <head> of your page with a <link> tag:

<head>
    <meta charset="utf-8">
    <title>Sourdough for Beginners</title>
    <link rel="stylesheet" href="style.css">
</head>

Before writing the rest of the styles, confirm that the stylesheet is linked by putting an obvious rule in style.css:

body {
    background-color: khaki;
}

Save both files, reload the page, and your background should turn an unmistakable tan. If it does not, check that href matches the filename exactly (style.css, not styles.css) and that both files are in the same folder.

Style it

Your style.css has to use all three kinds of selector from the reading.

A type selector is a tag name, and it styles every element of that type. Set a base color and a heading weight:

body {
    background-color: #faf7f2;
    color: #2b2b2b;
}
h1 {
    font-weight: bold;
    color: teal;
}

A class selector styles a group you choose, and you pick it out with a leading dot. Add class="card" to a couple of elements in index.html, then style all of them at once:

<ul class="card">
    ...
</ul>

.card {
    background-color: white;
    padding: 1rem;
}

An id selector styles the one element you name, and ids must be unique on the page, so use one for something singular. Add id="top" to your <h1> and select it with a hash:

#top {
    background-color: #f2d6d9;
}

Use :hover to apply a rule only while the pointer is over an element:

a {
    color: teal;
}
a:hover {
    background-color: #f2d6d9;
}

Use an @media rule to change the page below a screen width you choose:

@media (max-width: 600px) {
    body {
        font-size: 14px;
    }
}

Save and reload. You are not being graded on taste, but your stylesheet should visibly change the page.

Tuxedo Winnie the Pooh meme. Ordinary Pooh: 'a webpage.' Monocle-and-top-hat Pooh: 'a webpage with an external stylesheet, a hover state, and a responsive breakpoint.'

Predict, then check

Before you reload after adding the .card class, predict how many elements it will style and write the number down. Then check the prediction in the browser. Open developer tools with F12, click the Console tab, and ask the page directly:

> document.querySelectorAll('.card').length
2

document.querySelectorAll('.card') returns every element that selector matches, the same set that the CSS rule styles. .length counts them. If your prediction and the console disagree, determine why before continuing.

Try other selectors and compare the counts: p matches every paragraph, #top matches exactly one, and h1 ~ p matches every paragraph after your heading. Later this term, you will use the same selectors and querySelectorAll to extract data from pages you did not write.

Ship it

Your page currently exists only on your laptop. Project 0 requires you to host it online. We will use GitHub Pages, which serves any public repository as a live website for free (your fork of a public repo is already public, so you are set).

First, get your files into your GitHub repo. If you downloaded a ZIP last week, your edits live only on your laptop, so upload them: open your fork at github.com/<your-username>/lab-homepage, click Add file → Upload files, drag in index.html, style.css, and any image files, and click Commit changes.

If you cloned with git last week, use git add, git commit, and git push. We cover that workflow in a few weeks.

In your repository on GitHub, go to Settings → Pages. Under Build and deployment, set Source to Deploy from a branch, pick your default branch (main or master) and the /(root) folder, and click Save. Give GitHub a minute to build, then reload the settings page: it will show your live address, which looks like

https://<your-username>.github.io/lab-homepage/

Open it. The page is now reachable by anyone with the link. Open it on your phone or narrow the browser window to check the @media rule.

Validate the CSS

CSS has a validator like the W3C HTML validator you used last week. After your page is live, go to the W3C CSS validator, choose By URI, paste your GitHub Pages URL, and check. Read any errors, fix them in style.css, push the fix back to GitHub, and re-check until it reports Congratulations! No Error Found. Like the HTML validator, passing this one with zero errors is a Project 0 rubric line you are clearing early.

Submitting

Commit index.html, style.css, and any local assets, then submit your GitHub repository and branch to the Gradescope Programming Assignment. The grader parses the HTML and CSS and checks the stylesheet link, selectors, hover state, responsive rule, and CSS syntax directly; no screenshot is required. GitHub Actions provide preliminary feedback, while Gradescope’s instructor-owned tests are authoritative. Keep the GitHub Pages site live because Project 0 requires it, then fix, push, and resubmit any failed checks.

Your homepage now satisfies several Project 0 requirements: an external stylesheet, a :hover, class and id selectors, an @media rule, a public URL, and two validators passed. In web scraping, you will use querySelectorAll and the same selectors to extract data from other pages.