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

A2

CSS and Tailwind

Due Sunday, October 11, 2026 · 83 pts

Style the prototype with CSS fundamentals and Tailwind utility classes. Navigation, Dashboard, Modules, and related screens should start to resemble the target product.

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 2 — Styling User Interfaces with CSS and Tailwind

Open Chapter 2 in the book

0 of 19 items · 0 / 83 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 / 4 · 0 / 12 pts

Push an a2 branch on the same webdev-client repo and submit that branch’s Vercel URL.

  • Create, commit, and push a branch named a2 on the same public repository from A1.

    3 pts · §2.5

  • Enable branch deployments so a2 has its own preview URL, with Deployment Protection off.

    3 pts · §2.5

  • Labs still shows your full name and a wd-github repository link.

    3 pts · §2.5

  • app/labs/TOC.tsx and app/labs/page.tsx still list every lab and Kambaz.

    3 pts · §2.5

Lab — CSS, icons, and Tailwind

0 / 6 · 0 / 26 pts

Build Lab 2 in app/labs/lab2. CSS samples stay on the lab page; Tailwind samples live under app/labs/lab2/tailwind/.

  • Create app/labs/lab2/page.tsx and index.css, and link Lab 2 from the Labs index and TOC.

    3 pts · §2.1

  • Practice the style attribute, then move rules into the CSS file with id, class, and document-structure selectors.

    5 pts · §2.1.1

  • Create the color, border, box-model, corner, dimension, and display samples and import them.

    5 pts · §2.1.7

  • Create the position, z-index, float, grid, flex, and media-query samples and import them.

    5 pts · §2.1.13

  • Create ReactIconsSampler.tsx and import it on Lab 2.

    3 pts · §2.2

  • Create Tailwind samples under app/labs/lab2/tailwind/ — spacing, typography, backgrounds, responsive prefixes, filters, and grids.

    5 pts · §2.3

Kambaz — Chapter 2 restyle

0 / 9 · 0 / 45 pts

Restyle the prototype so navigation, Dashboard, Modules, and related screens start to resemble the target product. Editor and Account stay On your own.

  • Style Kambaz Navigation and replace the table layout with flex.

    5 pts · §2.4.1

  • Style the Dashboard and CourseCard.

    5 pts · §2.4.2

  • Style Course Navigation.

    5 pts · §2.4.3

  • Style Modules, Module, and Lesson.

    5 pts · §2.4.4

  • Style Home and Course Status.

    5 pts · §2.4.5

  • Style the People table.

    5 pts · §2.4.6

  • Style the Assignments screen.

    5 pts · §2.4.7

  • Style the Assignment Editor to match the figures and LiveDemo (On your own).

    5 pts · §2.4.8

  • Style Sign in, Sign up, Profile, and Account Navigation (On your own).

    5 pts · §2.4.9