Assignment Workflow

How to start, build, and verify an HTML project from beginning to submission

Why a Consistent Workflow Matters

Every assignment in CS-102 involves the same activities: set up a project, write code, review it in a browser, check it for issues, and prepare it for submission. Following the same sequence each time means you spend less mental energy on logistics and more on the actual coding.

This lesson walks through that workflow — not as a checklist to memorize, but so you understand the purpose behind each step.

---

Step 1 — Organize Your Files Before You Start

Before writing a single line of HTML, give your project a home on your computer.

Create a folder named Hancock in your user directory (if you do not already have one), then a folder inside it for CS-102. Each assignment gets its own folder inside CS-102.

Hancock/
└── CS-102/
    ├── Assgn1/
    ├── Assgn2/
    └── Assgn3/

This structure keeps assignments separate, which matters when you zip them up later. Each submission is a self-contained folder — all your HTML files, images, and stylesheets for that assignment live together in one place.

For Assignment 1: Download the Starter Kit and unzip it into your Assgn1 folder. The Starter Kit contains a template index.html and style.css to get you started.

For later assignments: Create a new folder (e.g., Assgn2), then copy everything from the previous assignment folder into it. Your new assignment builds on the last one.

Why copy instead of edit in place?

Keeping each assignment in its own folder means you always have a working copy from the previous week to fall back on. If something breaks in Assignment 3, you can compare it to your Assignment 2 files.

---

Step 2 — Open Your Project in VS Code

Open VS Code, then use File > Open Folder and navigate to your assignment folder. You can also right-click the folder in Windows Explorer or Mac Finder and choose Open with Code.

Once the folder is open, you will see all your project files listed in the Explorer panel on the left side of VS Code. From here you can click any file to open and edit it.

Open the folder, not a single file

If you open a single HTML file instead of the folder, VS Code will not show your other project files and Live Server may not behave correctly. Always open the folder.

---

Step 3 — Start Live Server and Begin Working

Double-click index.html in the Explorer panel to open it in the editor, then click Go Live in the bottom-right corner. A browser window opens showing your page.

Now work in cycles:

1. Read the assignment requirements in Canvas
2. Write or update HTML/CSS in VS Code
3. Save with Ctrl+S (Cmd+S on Mac) — Live Server updates the browser instantly
4. Review what changed in the browser
5. Repeat until your page meets the requirements

The save-and-review cycle is the core of web development work. Saving frequently (after each meaningful change, not just at the end) lets you catch problems while they are small.

---

Step 4 — Check Your Work with the HTML Checker

When you feel the assignment is complete, run the HTML Checker before zipping anything. The HTML Checker reads your project files and compares them against the assignment's requirements — it will flag missing elements, structural problems, and common errors.

1. Follow the process at HTML Checker to load your project
2. Review every result the checker reports
3. If issues appear, return to VS Code and address them
4. Save and run the HTML Checker again to confirm the fixes worked
5. Repeat until the checker results show your project is in good shape

The HTML Checker is not the final grade

The checker finds objective issues — missing tags, wrong file names, broken links. It does not evaluate design choices or content quality. An assignment that passes the checker still needs to satisfy the requirements described in Canvas.

Once you are satisfied with the results, take a screenshot of the HTML Checker output (including the filename and date/time visible in the results). Save that screenshot file into your project folder — it is part of your submission.

---

Troubleshooting Common Issues

Problems come up. Knowing what to check first saves time.

Can't Edit or Save Files

Symptom: You open a file but VS Code will not let you edit it, or changes do not save.

Cause: You are likely editing a file inside the zip archive rather than an extracted copy. File explorers on Windows and Mac can preview zip files, making them look like regular folders — but files inside are read-only until extracted.

Fix: Close the file. Right-click the .zip file and extract it to a folder. Open that extracted folder in VS Code.

You can tell a zip file is open in Windows because the path bar shows .zip in the folder name.

Live Server Does Not Open a Page

Symptom: You click Go Live but no browser opens, or the browser opens to an empty or error page.

Check:

• Is an HTML file open and visible in the VS Code editor? Live Server opens whatever file is active. If no HTML file is open, it does not know what to show.
• Is Live Server actually running? Look at the bottom-right of VS Code. A Go Live button means it is stopped; a port number (e.g., Port: 5500) means it is running. If it is running, check other browser tabs — the page may have opened there.

Changes Are Not Updating in the Browser

Symptom: You edit HTML, save, but the browser does not change.

Check:

• Did you actually save? Look at the file tabs in VS Code — a filled circle (●) next to a filename means that file is not saved. Use Ctrl+K, S to save all files at once.
• Is Live Server running? The port number should be visible in the bottom-right corner.
• Are you looking at the right browser tab? If you opened multiple tabs, the Live Server page may not be the one in focus.

Styles Are Not Showing

Symptom: Your page loads, but none of the CSS styling appears.

Check:

• Do your HTML files contain the correct link to the stylesheet?

  <link rel="stylesheet" href="style.css">

• Is the stylesheet filename spelled exactly the same as the filename in your folder? Filenames are case-sensitive on Mac and Linux.
• Are the HTML file and style.css file in the same folder?

Images Are Not Showing

Symptom: Image placeholders (broken image icons) appear instead of your images.

Check:

• Is the image file in the same folder as your HTML file?
• Does the src attribute in your <img> tag match the exact filename, including the extension (.jpg, .png, .gif)?

---

Summary

The assignment workflow is: organize your files, open the folder in VS Code, work in edit-save-review cycles with Live Server, check your work with the HTML Checker, and fix any issues before submitting. Each step connects to the next. The HTML Checker is your last check before packaging — not an optional step.

In the next lesson, you will learn how to package your project for submission, what compression does, and how to verify your zip file is correct before uploading it to Canvas.