Lab: Hello, Homepage

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

Build a homepage about a topic you care about, with an introduction and useful places for a visitor to explore. You will extend the same page in next week’s CSS lab and Project 0.

Start

Complete Course Setup first, then make your own repository and bring it onto your computer.

Make Your Copy on GitHub

Open the lab-homepage starter and sign in.
Choose Use this template → Create a new repository. Set Owner to your username, name it lab-homepage, keep it Public, and create it.
Check the address: it should begin github.com/<your-username>/lab-homepage. An address beginning github.com/rtealwitter/ is the instructor’s starter.

Put the Copy on Your Computer

A repository stores files and their change history. Cloning downloads your repository and remembers its GitHub address so you can send changes back.

In VS Code, open File → New Window, then Source Control → Clone Repository.
Choose Clone from GitHub and select <your-username>/lab-homepage. If it is missing, copy the address from your repository’s green Code button and paste it into Clone Repository instead.
Choose Documents/csci40 as the destination. VS Code creates the lab-homepage folder inside it.
Open the cloned folder when prompted and trust its authors. The Explorer should show index.html.

Introduce Your Topic

Open index.html and write a title and introduction for your chosen visitor. Use the HTML reading for the document structure:

<!DOCTYPE html> followed by one <html lang="en"> element;
a <head> containing <meta charset="utf-8"> and a nonempty <title>;
a <body> containing exactly one <h1> and at least one nonempty <p> paragraph.

Something to Explore

Give the visitor suggestions, a picture, and somewhere useful to go next:

one ordered or unordered list with at least three items;
one link to a real http or https page, such as the course website;
an image with a working src and useful, nonempty alt text.

A local image can sit beside index.html, with its filename as src; a full https image URL also works. To preview, right-click index.html in VS Code, choose Reveal in File Explorer or Reveal in Finder, and double-click the file. Save and reload as you work.

Check the Page

Upload index.html to the W3C HTML Validator using Validate by File Upload. Fix errors and recheck, then visit the page to test its link and image.

Gradescope checks document structure, content, image paths, and whether submitted bitmap images decode. A list item does not count as a paragraph. Appearance, remote image availability, alt-text quality, and W3C validation are self-checks; no screenshot is required.

Submit

A commit records a snapshot; sync sends it to GitHub.

Save index.html and any image files. In Source Control, click the + beside Changes to stage them.
Enter a message such as finish homepage, click Commit, then Sync Changes. Approve any GitHub sign-in or pull/push prompt.
Reload your repository on GitHub and confirm your edits arrived.
On Gradescope, choose GitHub, connect your account if prompted, and submit lab-homepage on the main branch.

After a failed check, edit, save, commit, sync, and resubmit. Gradescope grades the submitted snapshot; a later GitHub commit needs another submission. Keep this repository for the CSS lab.