Join WhatsApp Group

CSC336 — Web Technologies — Fall 2026 Assignments & Labs

Across the semester you will build one running e-commerce website, one piece at a time. Assignment 1 is a standalone warm-up (your personal CV page). Assignments 2, 3, and 4 are three stages of the same e-commerce site: first the static, responsive pages, then client-side interactivity, then a real backend. The four labs are shorter, more guided exercises that build the specific skill each assignment needs, slightly ahead of it.

Before You Start: Repository, Folders, and Submission

You already have one public GitHub repository for the whole semester, created in the Submitting Coursework via GitHub tutorial, with assignment-1 … assignment-4 and lab-1 … lab-4 folders already in it.
Every piece of work below is committed and pushed into its matching folder — nothing loose in the repo root, nothing left only on your laptop.
Once, at the start of the semester, submit your repository link through this form: https://forms.gle/SrFpX46Fqi8pwBBm9. You do not resubmit the link for every assignment — the same repository is reused and re-checked all term, so keep pushing to it.
Every assignment and lab folder needs a completion PDF (see below) alongside your actual code/files.

The Completion PDF (required in every assignment/lab folder)

After you finish a task, add one PDF file directly inside that task’s folder (e.g. assignment-1/CV_YourName_RollNumber.pdf, lab-2/Lab2_YourName_RollNumber.pdf) containing, in this order:

Your full name and roll number at the top.
The assignment/lab statement you were given (copy-paste the task description from this page).
Screenshots of your finished work actually running (the page open in a browser, console output, etc. — not just the code).
Your code (paste it as text/code blocks in the PDF, not just a screenshot of it, so it stays readable and copyable).

This PDF lives next to your actual working files in the same folder — it does not replace pushing the real, runnable code.

Your Chosen Reference E-commerce Site (Assignments 2, 3, and 4)

Before starting Assignment 2, pick one real, existing e-commerce website (e.g. Daraz, Amazon, an online clothing store, a local shop’s website — anything genuinely live) that you will use as your design/functionality reference for the rest of the semester. You are not copying its code — you are using it as a realistic model for what a product listing page, a product detail page, and a checkout flow actually need to do.

In assignment-2/README.md, add:

The name of the site you chose.
Its full URL.
A screenshot of its homepage (embedded in the README, e.g. ![Homepage](screenshot.png)).

You’ll keep building against this same reference site in Assignments 3 and 4 — no need to re-declare it, just note “same reference site as Assignment 2” in those README files.

Assignment 1 — Your Personal CV Page

Difficulty: Foundational · Covers: Lectures 3–6 (HTML & HTML5, Semantic HTML and Forms, CSS Fundamentals, the CSS Box Model) · Folder: assignment-1/

Task: Build a single-page personal CV/résumé as a static HTML + CSS website — no JavaScript, no framework, just semantic HTML5 and hand-written CSS. This is where you prove you actually know the raw building blocks before anything is allowed to hide them from you.

Your page must include, at minimum:

A header with your name, a short professional tagline, and a photo (a placeholder image is fine).
An “About Me” section.
An “Education” section listing your academic history in a semantic list or table.
A “Skills” section.
A “Contact” section with a real <a href="mailto:..."> link and at least one social/portfolio link.
Correct use of semantic HTML5 elements throughout — <header>, <nav>, <main>, <section>, <article>, <footer> as appropriate, not a page built entirely out of unstyled <div>s.
Styling entirely in a separate styles.css file (external stylesheet, not inline style="" attributes) using the box model correctly — sensible margins, padding, and borders, not everything jammed against everything else.

Deliverables in assignment-1/: index.html, styles.css, any images, and your completion PDF.

Assignment 2 — Your E-commerce Site: Static, Responsive Pages

Difficulty: Easy–Medium · Covers: Lectures 5–10 (CSS Fundamentals through Responsive Design and Frameworks) · Folder: assignment-2/

Task: Build the static, responsive front page and product page of your e-commerce site, modeled on your chosen reference site. No JavaScript yet — this assignment is entirely about layout, styling, and responsiveness.

You must build:

A homepage / product listing page with a header (site name/logo, a nav bar, a cart icon that does not need to work yet) and a responsive grid of at least 8 product cards (image, name, price, an “Add to Cart” button that does not need to work yet).
A single product detail page for one product: larger image, name, price, description, quantity selector, and an “Add to Cart” button (again, not functional yet).
A consistent footer across both pages.
The whole layout built with Flexbox and/or CSS Grid — no table-based layout, no absolute-positioning-everything.
Genuine responsiveness: the layout must reflow sensibly at a phone width (~375px), a tablet width (~768px), and a desktop width, using media queries or your framework’s responsive grid classes. Screenshot all three widths for your completion PDF.
Either Bootstrap or Tailwind (your choice) used for at least the grid/layout and the navbar — this is the frameworks half of Lecture 10, and it should actually be doing real work in your layout, not just be linked and unused.

Deliverables in assignment-2/: index.html, product.html, your CSS (or framework config), a README.md with your reference site’s name/URL/screenshot (see above), and your completion PDF.

Assignment 3 — Making It Interactive: Cart, Validation, and Live Data

Difficulty: Medium–Hard · Covers: Lectures 11–15 (Core JavaScript ES6+ through Async JavaScript, Promises and Fetch) · Folder: assignment-3/

Task: Take the static pages from Assignment 2 and make them actually work, using plain JavaScript — no framework like React yet.

You must implement:

A working “Add to Cart”: clicking it on any product updates a visible cart item count in the header (DOM manipulation + event handling), and adds the item to an in-memory cart.
A cart page (cart.html) that lists everything currently in the cart, lets the user change quantity or remove an item, and shows a running total — all computed and re-rendered with JavaScript, using array methods (map/filter/reduce) from Lecture 12, not hardcoded.
A checkout form (name, email, phone, address) with real client-side validation using regular expressions (Lecture 14) — invalid email/phone formats must show a clear error and block submission.
Product data loaded dynamically: move your product listing out of hardcoded HTML into a products.json file, and load it with the Fetch API (Lecture 15) at page load, rendering the product grid from that JSON instead of static markup.

Deliverables in assignment-3/: your updated HTML pages, a script.js (or several, sensibly split), products.json, a README.md noting “same reference site as Assignment 2,” and your completion PDF (include a screenshot of your browser console showing no errors).

Assignment 4 — A Real Backend: API, Database, and Login

Difficulty: Hard (capstone) · Covers: Lectures 16–25 (Introduction to Server-Side Programming through REST API Development and Authentication) · Folder: assignment-4/

Task: Replace your products.json file from Assignment 3 with a real backend server and a real database, and add user accounts. Use whichever stack the CDF allows and you’ve practiced: Node.js/Express, Python/Django, or FastAPI, connected to PostgreSQL or MongoDB.

Your backend must provide, as a genuine REST API:

GET /api/products — list all products from the database.
GET /api/products/:id — a single product’s details.
POST /api/auth/register and POST /api/auth/login — real user accounts, with passwords properly hashed (never stored in plain text), and session- or token-based authentication (Lecture 25) protecting at least one route (e.g. only a logged-in user can place an order).
POST /api/orders — accepts the current cart and creates an order record tied to the logged-in user.
Correct HTTP status codes (200, 201, 400, 401, 404, etc.) and at least one custom middleware (e.g. a request logger or the auth check itself) — both from Lectures 18–21.

Update your Assignment 3 frontend to call this real API (via fetch) instead of reading the local products.json, and add simple login/register pages.

Deliverables in assignment-4/: a server/ folder (your backend code, plus a short note on how to run it and what database it expects), your updated frontend, a README.md noting “same reference site as Assignment 2,” and your completion PDF (include a screenshot of a successful API call in your browser’s Network tab or Postman/Thunder Client).

Lab 1 — Semantic HTML Scaffold

Difficulty: Easy · Covers: Lectures 3–4 · Folder: lab-1/

Before you design your own CV in Assignment 1, practice the raw skeleton: build a semantic HTML5 skeleton (no styling required) for a generic e-commerce homepage — correct <header>, <nav> with at least 4 links, a <main> containing three <section>s (featured products, categories, newsletter signup), and a <footer> with at least three columns of links. Validate your HTML with the W3C Validator and include a screenshot of a clean validation result in your completion PDF.

Deliverables in lab-1/: index.html and your completion PDF.

Lab 2 — Responsive Navbar and Grid Drill

Difficulty: Easy–Medium · Covers: Lectures 7–10 · Folder: lab-2/

A focused, smaller-scale rehearsal for Assignment 2: build just a responsive navbar (logo left, links center, cart icon right, collapsing into a hamburger menu below 768px) and a 4-column-desktop / 2-column-tablet / 1-column-phone product grid, using Flexbox or Grid plus Bootstrap or Tailwind. Content can be placeholder text/images — the point is the responsive mechanics, not the final design.

Deliverables in lab-2/: index.html, your CSS/framework files, and your completion PDF (with screenshots at phone/tablet/desktop widths).

Lab 3 — DOM and Event Handling Drills

Difficulty: Medium · Covers: Lectures 11–14 · Folder: lab-3/

Three small, self-contained JavaScript drills, each on its own page: (1) a quantity stepper (+ / − buttons that update a number, never going below 1); (2) a live search box that filters a hardcoded list of 10 product names as the user types (no page reload); (3) a one-field email input that shows a green check or red error message in real time as the user types, validated with a regular expression.

Deliverables in lab-3/: three small HTML+JS pages and your completion PDF.

Lab 4 — Your First API Endpoint

Difficulty: Medium–Hard · Covers: Lectures 16–19, 22 · Folder: lab-4/

A smaller-scoped rehearsal for Assignment 4: set up a minimal server (Express, Django, or FastAPI) with exactly one route, GET /api/products, returning a hardcoded array of at least 5 products as JSON with a 200 status code. Then build one plain HTML page that fetches that endpoint and renders the list. If you’re using PostgreSQL or MongoDB already, connect the route to a real (even tiny) database table/collection instead of a hardcoded array — optional for this lab, required by Assignment 4.

Deliverables in lab-4/: your server code, your fetching HTML page, and your completion PDF (include a screenshot of the raw JSON response, e.g. from your browser or Postman).