Assignments · Syllabus · Course book · Blog · Slides · Graded quizzes · Practice (ungraded)

A1

HTML user interfaces

Due Sunday, September 27, 2026 · 125 pts

Build the Labs HTML work (Lab 1 components and Labs navigation) and prototype Kambaz structure screens with HTML and the App Router: landing, Account, Dashboard, course Home, Modules, and Assignments. Structure first; visual polish comes in A2.

Course website accounts. Need an account? Sign up first with the same Northeastern email you use on Canvas, then Sign in. This site is not Canvas, and accounts are not pre-provisioned. Using your Canvas email lets us map site progress back to the roster.

Course book

Chapter 1 — Building Next.js User Interfaces with HTML

Open Chapter 1 in the book

Submit URLs

URL submit and test fields are not unlocked by a calendar date. They appear when you are signed in with the same Northeastern email as your Canvas/FACT roster, and that email is on the course site roster.

Paste a public Vercel URL. Checks normalize the deploy origin, fetch Labs and Lab pages, crawl Kambaz screens, and look for wd-* ids and required content markers. A GitHub URL is optional for Run checks.

Sign in to submit URLs

This site is separate from Canvas. Accounts are not created for you — Sign up first with the same Northeastern email you use on Canvas, then Sign in to save URLs across devices.

URL submit and test fields are not unlocked by a calendar date. They appear when you are signed in with the same Northeastern email as your Canvas/FACT roster, and that email is on the course site roster.

0 of 44 items · 0 / 125 pts

Checkmarks stay in this browser. Sign up if you don’t have a course-website account yet, then Sign in with the same Northeastern email you use on Canvas to sync across devices.

Delivery

0 / 3 · 0 / 9 pts

Submit a Vercel URL that graders can open without signing in. A public GitHub repository is optional for auto-checks, but graders still look for the repo and a wd-github link on Labs.

  • Import webdev-client on Vercel, disable Deployment Protection, and submit a URL that opens without a Vercel login.

    3 pts · §1.6

  • Labs shows your full name (first then last, matching Canvas) so graders can identify the work.

    3 pts · §1.7

  • Public webdev-client repo with the source that produced the deploy, plus a wd-github link on Labs.

    3 pts · §1.5

Lab — HTML components

0 / 33 · 0 / 80 pts

Same nested list as book §1.3.12: one row per Lab 1 section (1.3.1–1.3.11), with lettered a/b/c for the Lab component, On your own, and With AI extra.

  1. HeadingTags

    1. Create HeadingTags.tsx from the book sample (h4 "Heading Tags" and its paragraph). Before With AI, add h1–h6 as practice without erasing that sample text, and import the component on the Lab 1 page.

      3 pts · §1.3.1

    2. Personal heading under wd-your-heading, including a span with id wd-your-span.

      2 pts · §1.3.1

    3. After the practice h1–h6 headings you added, add a sample outline with id wd-ai-headings (h4 Lab notes, h5 What I built, h6 Next step). Keep the book sample text.

      2 pts · §1.3.1

  2. ParagraphTag

    1. Create ParagraphTag.tsx and wrap sample text in paragraph tags for vertical spacing.

      3 pts · §1.3.2

    2. Two personal paragraphs with ids wd-p-your-1 and wd-p-your-2.

      2 pts · §1.3.2

    3. Extra sample paragraph with id wd-ai-p that explains why wrapping text in p creates vertical spacing.

      2 pts · §1.3.2

  3. ListTags

    1. Create ListTags.tsx with the pancake ordered list and the sample book unordered list.

      3 pts · §1.3.3

    2. Favorite recipe ordered list (wd-your-favorite-recipe) and favorites unordered list (wd-your-books).

      2 pts · §1.3.3

    3. Sample HTML-tags list with id wd-ai-html-tags (at least five tags from this chapter).

      2 pts · §1.3.3

  4. Tables

    1. Create Tables.tsx with the quiz grades table (Q1–Q3) and an average row.

      3 pts · §1.3.4

    2. Second personal table with id wd-your-table.

      2 pts · §1.3.4

    3. Quiz rows Q4–Q10 in the sample grades table, with a recalculated average from all ten scores.

      2 pts · §1.3.4

  5. Images

    1. Create Images.tsx with the remote Starship image and the local teslabot image.

      3 pts · §1.3.5

    2. Your image with id wd-your-image.

      2 pts · §1.3.5

    3. Extra sample image with id wd-ai-image from a public URL.

      2 pts · §1.3.5

  6. Forms

    1. Build the form components under app/labs/lab1/forms/ (text, textarea, radio, checkboxes, dropdowns, other types, buttons) and assemble them in Forms.tsx.

      5 pts · §1.3.6

    2. Student Profile form in the single canonical app/labs/lab1/forms/YourForm.tsx with id wd-your-form covering the field types from the chapter, plus Save and Cancel — overwrite that same path and keep that same id; Forms.tsx imports that one YourForm only.

      3 pts · §1.3.6

    3. Overwrite the same app/labs/lab1/forms/YourForm.tsx (keep id wd-your-form; no second file; Forms.tsx imports that one YourForm only), then replace every SAMPLE default with your own details.

      2 pts · §1.3.6

  7. HighlightedParagraph

    1. Create HighlightedParagraph.tsx with text and style props (attributes only) and show a few variations.

      3 pts · §1.3.7

    2. Extra HighlightedParagraph with your text and colors.

      2 pts · §1.3.7

    3. Extra sample HighlightedParagraph (not your personal sentence) with different colors.

      2 pts · §1.3.7

  8. HighlightedBox

    1. Create HighlightedBox.tsx that wraps nested children with the same style props.

      3 pts · §1.3.8

    2. Extra HighlightedBox wrapping your goals list.

      2 pts · §1.3.8

    3. Extra sample HighlightedBox of nested tags (not your personal goals list).

      2 pts · §1.3.8

  9. AnchorTag

    1. Create AnchorTag.tsx with lipsum plus GitHub anchors and import it on the Lab 1 page.

      3 pts · §1.3.9

    2. Personal anchors wd-your-link and wd-your-github.

      2 pts · §1.3.9

    3. Sample docs link with id wd-ai-link (for example MDN table element).

      2 pts · §1.3.9

  10. Labs navigation

    1. Labs index at app/labs/page.tsx lists Lab 1–3 with Link, plus a Kambaz link so graders can reach every required page.

      3 pts · §1.3.10

    2. Create Lab 4 and link to it from the Labs index (id wd-lab4-link).

      2 pts · §1.3.10

    3. Lab 5 placeholder page and a Labs index link to /labs/lab5.

      2 pts · §1.3.10

  11. Labs TOC and layout

    1. Create app/labs/TOC.tsx and app/labs/layout.tsx so the TOC wraps lab pages via children.

      3 pts · §1.3.11

    2. Personal note or link in the labs TOC — your name, a one-line motto, or a link back to the book.

      2 pts · §1.3.11

    3. Chapter 1 link in the labs TOC (id wd-toc-book-link) labeled Chapter 1.

      2 pts · §1.3.11

Kambaz — Chapter 1 screens

0 / 8 · 0 / 36 pts

Prototype the Kambaz screens with HTML and the App Router. Assignments and the editor stay On your own.

  • Sign in, Sign up, Profile, and Account Navigation, with / and /account redirecting to /account/signin.

    5 pts · §1.4.2

  • Dashboard with at least three CourseCards linking to /courses/[cid]/home.

    5 pts · §1.4.3

  • Kambaz Navigation sidebar in the (kambaz) layout; Sign in (wd-signin-btn) points at /dashboard.

    3 pts · §1.4.3.1

  • Course Navigation and course layout, including placeholder pages for Piazza, Zoom, Quizzes, Grades, and People.

    3 pts · §1.4.4

  • Modules page with Module and Lesson, nested weeks, lessons, and content items.

    5 pts · §1.4.5

  • Home assembles Modules plus Course Status. No leftover page.tsx directly under courses/[cid]/.

    5 pts · §1.4.6

  • Assignments list matching the book LiveDemo and required ids (On your own).

    5 pts · §1.4.7

  • Assignment Editor matching the book LiveDemo and required ids (On your own).

    5 pts · §1.4.8