Lab: Hello, Homepage

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

In this first lab, you will build a webpage from the skeleton up. The file is also the starting point for Project 0, which expands it into a full site over the next couple of weeks. Choose content you would not mind putting your name on.

Most labs this term are checked automatically, and you can resubmit until the tests turn green. For this one, the grader parses the page itself and checks its structure, content, link, and accessible image; no screenshot is needed.

Starter code: github.com/rtealwitter/lab-homepage

Getting set up

The HTML reading has you create a GitHub account, install Git and VS Code, install the official GitHub Pull Requests extension, and sign in. Complete that setup first; we will also walk through it together in class.

This lab starts from a starter repository on GitHub. A repository is one project folder plus its saved history. Make your own copy, called a fork:

Open the starter repository linked above and select Fork near the top right.
Keep the name lab-homepage, choose your personal account as the owner, and create the fork.
Confirm that the address is now github.com/<your-username>/lab-homepage. You own this copy; changing it will not change the instructor’s starter.

Next, use VS Code to make a local working copy, called a clone:

Open VS Code and select the Source Control icon in the left Activity Bar. It looks like a branching line.
Select Clone Repository, then Clone from GitHub. If prompted, complete the GitHub browser sign-in.
Search for and select <your-username>/lab-homepage. Be careful not to select the instructor’s copy.
Choose your csci40 folder as the parent location. VS Code creates a new lab-homepage folder inside it.
Select Open when prompted, then trust the workspace because this is the course starter repository.

The Explorer panel now shows the starter index.html. This is the folder you will edit, preview, commit, and submit. If Clone Repository reports that Git is missing, install Git from the link in the reading, completely quit VS Code, and reopen it.

Build your homepage

Open index.html and replace whatever is there with the page you want. Start from the skeleton you met in the reading and fill the <body> with your own content:

<!DOCTYPE html>
<html>
    <head>
        <title>Sourdough for Beginners</title>
    </head>
    <body>
        <h1>Sourdough for Beginners</h1>
        <p>I have killed four starters. Here is what I learned.</p>
        <img src="starter.jpg" alt="A jar of bubbling sourdough starter on a sunny windowsill.">
        <p>You will need three things:</p>
        <ul>
            <li>Flour, and more of it than you think</li>
            <li>Water, ideally not straight from a chlorinated tap</li>
            <li>Patience, or at least a calendar reminder</li>
        </ul>
        <p>The full method lives on <a href="https://www.theperfectloaf.com/">The Perfect Loaf</a>.</p>
    </body>
</html>

Pick your own safe-for-work topic, preferably one that will hold your interest for three weeks. Whatever you choose, your index.html has to contain all of the following, with every tag correctly nested and closed:

the full skeleton: <!DOCTYPE html>, one <html>, a <head> holding a <title>, and a <body>;
exactly one <h1>, the page’s title, not one heading among many;
at least one <p> of real text;
one <img> with real, non-empty alt text that describes the picture. Use an image that actually appears: either drop a file into the folder and name it in src, or point src at a full https://… image URL;
a <ul> or <ol> list with at least three <li> items;
at least one link, an <a> with an href that goes somewhere real.

Work the way the reading taught: change something, save with Ctrl+S / Cmd+S, switch to the browser, reload. If a change does not show up, check whether the file is saved. An unsaved file has a dot instead of an X on its VS Code tab.

FoxTrot comic strip: two kids invent a game they call 'HTML tag,' chasing and tagging each other while shouting tag names -- B, I, HEAD, DIV, STYLE -- and finish with 'notice how the other kids won't ever play HTML tag with us? We're obviously too STRONG.'

Validate the HTML

Browsers often render malformed HTML by guessing what you meant. A page can therefore look correct even if you omitted a </p>, overlapped tags instead of nesting them, or forgot an alt attribute. The W3C validator checks your HTML against the specification and reports these mistakes. Open it, choose the Validate by File Upload tab (your page is not on the internet yet, that is next week’s job), upload your index.html, and press Check.

The first time, expect a list of red errors. Read them literally; each names a line number and a problem:

“End tag li seen, but there were open elements”, something inside an <li> never closed.
“Unclosed element ul”, you forgot the </ul>.
“An img element must have an alt attribute”, you omitted the required alternative text.

Fix the top error, re-upload, and check again. Errors tend to cascade: one missing tag can cause three complaints. Work from the top and re-run often. Keep going until the page comes back green and the validator reports Document checking completed. No errors or warnings to show.

The four-panel 'expanding brain' meme escalating to a supernova of glowing neurons, captioned with the validator finally reporting 'No errors or warnings to show.'

You may also see yellow warnings, which are not errors but are worth clearing while you are here. Two are nearly universal on a first page, and two lines fix both: declare the page’s language on the <html> tag and its character encoding in the <head>.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sourdough for Beginners</title>
    </head>

lang="en" tells screen readers and search engines that the page is in English. <meta charset="utf-8"> tells the browser how to decode text, including emoji and accented letters. Add them and re-check the page.

Passing the validator with zero errors is a requirement on the Project 0 rubric.

Submitting

First send your saved work back to GitHub from VS Code:

Open the Source Control view. Your edited and new files appear under Changes.
Select each file to review what changed. Do not commit unrelated downloads or secret information.
Select the + beside Changes to stage the files.
Enter a short commit message such as complete homepage lab, then select Commit. A commit is a named snapshot in the repository’s history.
Select Sync Changes to push the commit to GitHub. Approve the sign-in prompt if one appears.
Refresh your fork on GitHub and confirm that the new commit and files are visible. A commit that exists only on your laptop cannot be graded.

If VS Code asks you to configure your name and email during the first commit, open Terminal → New Terminal and copy these two commands, replacing the quoted values with your name and an email listed in GitHub Settings → Emails:

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

Then submit the GitHub snapshot to Gradescope:

Open Gradescope in a regular browser, not inside an LMS frame, and open Lab: Hello, Homepage.
Choose GitHub as the submission method. The first time, link and authorize your GitHub account.
Choose the lab-homepage repository and its main branch, then submit.
Read the named test results. If anything fails, fix it in VS Code, save, commit, sync, and resubmit on Gradescope. A later GitHub push does not update an earlier Gradescope submission automatically.

GitHub Actions, when present, give preliminary feedback; the instructor-owned tests on Gradescope are the authoritative grade. The grader checks the page structure and required content directly, so do not submit a validator screenshot. You may repeat the edit, commit, sync, and resubmit loop until the lab earns 100%.

Keep this file safe. It is the starting point for Project 0, and next week’s CSS lab adds styles to it.