HTML user interfaces

Delivery

Submit a Vercel URL that graders can open without signing in. A GitHub URL is optional for Run checks, but the GitHub repository row still needs your public repo and a link to it on Labs. Keep the wd-github id on that link; the ids help us test your work. Name on Labs (also called Name and section) is checked automatically: Run checks looks for your full Canvas name on Labs (first then last, matching the roster) and compares it with the account you are signed in with. It is not a checkbox or control in Run checks, and your section is not checked.

• Vercel deployment

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

  3 pts · §1.6

• Name on Labs

  Show your full Canvas name on Labs as visible text (first then last, matching the roster), for example in the Labs TOC or on /labs. Run checks looks for it automatically: it compares the name on your deployed Labs pages with the roster name of the account you are signed in with, so sign in with your Canvas email first. Signed out, this row stays unticked because there is no roster name to compare. There is no Name and section checkbox or control in Run checks, and your section is not checked.

  3 pts · §1.8

• GitHub repository

  Public webdev-client repo with the source that produced the deploy, plus a link to it on Labs (keep the id wd-github on that link).

  3 pts · §1.5

Lab — HTML components

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. A Manual check badge means checked by staff at grading. Staff grade that row on your deploy URL after you submit. Run checks never marks it pass or fail, so an unticked Manual check row does not mean you lost points, and it is not a failed auto check.

1. HeadingTags
   1. Lab component

      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. On your ownOn your own

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

      2 pts · §1.3.1

   3. With AIWith AI

      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. Lab component

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

      3 pts · §1.3.2

   2. On your ownOn your own

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

      2 pts · §1.3.2

   3. With AIWith AI

      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. Lab component

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

      3 pts · §1.3.3

   2. On your ownOn your own

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

      2 pts · §1.3.3

   3. With AIWith AI

      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. Lab component

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

      3 pts · §1.3.4

   2. On your ownOn your own

      Second personal table with id wd-your-table.

      2 pts · §1.3.4

   3. With AIWith AI

      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. Lab component

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

      3 pts · §1.3.5

   2. On your ownOn your own

      Your image with id wd-your-image.

      2 pts · §1.3.5

   3. With AIWith AI

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

      2 pts · §1.3.5

6. Forms
   1. Lab component

      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. On your ownOn your own

      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. Checked by staff at grading

      With AIWith AI

      Checked by staff at grading. Staff grade this row on your deploy URL after you submit. Run checks does not mark it pass or fail, so an unticked Manual check row does not mean you lost points. Manual check is not a failed auto check.

      Overwrite the same file app/labs/lab1/forms/YourForm.tsx and keep id wd-your-form — the same id as On your own. No second file and no new form id (do not invent wd-ai-form, wd-ai-your-form, or similar). Unlike earlier With AI steps that add a new wd-ai-* id, Forms reuses the On-your-own id. Forms.tsx still imports that one YourForm only. Then replace every SAMPLE default with your own details.

      2 pts · §1.3.6

7. HighlightedParagraph
   1. Lab component

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

      3 pts · §1.3.7

   2. Checked by staff at grading

      On your ownOn your own

      Checked by staff at grading. Staff grade this row on your deploy URL after you submit. Run checks does not mark it pass or fail, so an unticked Manual check row does not mean you lost points. Manual check is not a failed auto check.

      Extra HighlightedParagraph with your text and colors.

      2 pts · §1.3.7

   3. Checked by staff at grading

      With AIWith AI

      Checked by staff at grading. Staff grade this row on your deploy URL after you submit. Run checks does not mark it pass or fail, so an unticked Manual check row does not mean you lost points. Manual check is not a failed auto check.

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

      2 pts · §1.3.7

8. HighlightedBox
   1. Lab component

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

      3 pts · §1.3.8

   2. Checked by staff at grading

      On your ownOn your own

      Checked by staff at grading. Staff grade this row on your deploy URL after you submit. Run checks does not mark it pass or fail, so an unticked Manual check row does not mean you lost points. Manual check is not a failed auto check.

      Extra HighlightedBox wrapping your goals list.

      2 pts · §1.3.8

   3. Checked by staff at grading

      With AIWith AI

      Checked by staff at grading. Staff grade this row on your deploy URL after you submit. Run checks does not mark it pass or fail, so an unticked Manual check row does not mean you lost points. Manual check is not a failed auto check.

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

      2 pts · §1.3.8

9. AnchorTag
   1. Lab component

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

      3 pts · §1.3.9

   2. On your ownOn your own

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

      2 pts · §1.3.9

   3. With AIWith AI

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

      2 pts · §1.3.9

10. Labs navigation
    1. Lab component

       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. On your ownOn your own

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

       2 pts · §1.3.10

    3. With AIWith AI

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

       2 pts · §1.3.10

11. Labs TOC and layout
    1. Lab component

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

       3 pts · §1.3.11

    2. Checked by staff at grading

       On your ownOn your own

       Checked by staff at grading. Staff grade this row on your deploy URL after you submit. Run checks does not mark it pass or fail, so an unticked Manual check row does not mean you lost points. Manual check is not a failed auto check.

       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. With AIWith AI

       Chapter 1 link in the labs TOC (id wd-toc-book-link). Your own app has no /book routes, so the link uses the full course-book address, https://kambaz.dev/book/ch1, and opens the chapter. Keep the id wd-toc-book-link on it; the ids help us test your work.

       2 pts · §1.3.11

Kambaz — Chapter 1 screens

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

• Account screens

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

  5 pts · §1.4.2

• Dashboard

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

  5 pts · §1.4.3

• Kambaz navigation

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

  3 pts · §1.4.3.1

• Course navigation

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

  3 pts · §1.4.4

• Modules

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

  5 pts · §1.4.5

• Course Home

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

  5 pts · §1.4.6

• Assignments screenOn your own

  The Assignments screen lists at least one assignment whose title links to its editor (/courses/[cid]/assignments/[aid]). Three are recommended, like A1, A2, A3 (On your own).

  5 pts · §1.4.7

• Assignment EditorOn your own

  Assignment Editor matching the book demo (On your own): the name, description, and points from the stub plus the controls listed in §1.4.8. Keep the book's ids.

  5 pts · §1.4.8