Lab: Hello, Homepage

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

Build one webpage about a topic you choose. You will continue using it in next week’s CSS lab and Project 0.

Start

Complete Course Setup first. Starting an assignment has two parts: make your own copy of the starter code on GitHub, then bring that copy down to your computer.

Make Your Copy on GitHub

  1. Open the lab-homepage starter repository and sign in to GitHub if you are not already signed in.
  2. Click the green Use this template button, then Create a new repository.
  3. Leave Owner set to your username, type lab-homepage as the repository name, keep it Public, and click Create repository.
  4. GitHub opens your new repository. Its address should begin github.com/<your-username>/lab-homepage. If it begins github.com/rtealwitter/, you are looking at my starter rather than your copy; go back to step 2.

Put the Copy on Your Computer

The copy on GitHub is a repository: a folder of files together with a record of every change made to them. Cloning downloads that folder to your computer and remembers where it came from, so VS Code can send your changes back later.

  1. In VS Code, choose File → New Window so you start from an empty window.
  2. Click the Source Control icon in the left bar (it looks like a branching line), then click Clone Repository.
  3. Choose Clone from GitHub, then pick <your-username>/lab-homepage from the list. Typing lab-homepage shortens the list.
  4. A folder chooser opens. Open Documents, then open csci40, and click Select as Repository Destination. Do not make a folder for the lab yourself: VS Code creates lab-homepage inside csci40 on its own. If csci40 does not exist yet, use the chooser’s New Folder button to create it inside Documents first.
  5. When VS Code asks whether you would like to open the cloned repository, click Open. If it asks whether you trust the authors of the files, click Yes, I trust the authors.

The Explorer panel on the left now lists the repository’s files, including index.html, and the folder Documents/csci40/lab-homepage exists on your computer. If your repository did not appear in step 3, open it on GitHub, click the green Code button, copy the address shown there, and paste it into the box that appears after Clone Repository instead.

Build the Page

Open index.html and make the page your own. Choose a topic you would be comfortable publishing under your name, then include:

For a local image, put the image file beside index.html and use its filename as src. You may instead use a full https image URL. Save the file and reload it in your browser as you work.

Check the HTML

Open the W3C HTML Validator, choose Validate by File Upload, and upload index.html. Fix the first reported error, upload the file again, and repeat until the validator reports no errors. Also open the page in your browser and confirm that the image and link work.

The Gradescope grader checks the file itself, so you do not need a validator screenshot. It reports missing document elements, page content, and image paths separately. Text in a list item does not count as a paragraph. Check external links and images in your browser; a repository snapshot cannot confirm that a remote website is working.

Submit

Your page exists only on your computer until you send it to GitHub. Sending it takes two steps in VS Code: a commit records a snapshot of your files with a short message, and sync copies that snapshot to GitHub.

  1. Save index.html. An unsaved tab shows a dot instead of an X.
  2. Open the Source Control panel. It lists index.html, and any image files you added, under Changes.
  3. Hover over the word Changes and click the + that appears beside it to stage every file.
  4. Type a short message describing the snapshot in the box at the top, such as finish homepage, and click Commit.
  5. Click Sync Changes. If VS Code says it will pull and push commits, click OK, and approve the GitHub sign-in if your browser asks.
  6. Open your repository on GitHub and reload the page. Your edits to index.html should be visible there. A change that is only on your computer cannot be graded.

Then submit the repository on Gradescope:

  1. Open the assignment on Gradescope and choose GitHub as the submission method. The first time, Gradescope asks to connect to your GitHub account; allow it.
  2. Choose the lab-homepage repository and the main branch, then submit.
  3. Read the test results. To fix a failure, edit the file in VS Code, save, commit, and sync again, then return to Gradescope and resubmit. Gradescope grades the snapshot you submitted, so a new commit on GitHub is not graded until you resubmit it.

Keep the repository after submitting: next week’s CSS lab continues in the same files.