Assignments · Syllabus · Course book · Blog · Slides · 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.
Sign in to see your submission status
Submit URLs
Run checks on a public Vercel URL works without an account. Submitting URLs is not unlocked by a calendar date. Submit stays closed until you are signed in with the same Northeastern email as your Canvas/FACT roster, and that email is on the course site roster. After a submission is stored, the button says Update submission.
Paste the a2 branch preview URL (the hostname contains -git-a2-) and your repository’s GitHub URL (the root or …/tree/a2 both work). Checks open the preview, then fetch Labs, Lab 2, the Tailwind page, and Kambaz screens.
Run checks on a public Vercel URL works without an account. Submitting URLs is not unlocked by a calendar date. Submit stays closed until you are signed in with the same Northeastern email as your Canvas/FACT roster, and that email is on the course site roster. After a submission is stored, the button says Update submission.
No checks yet. Run to score this page. Checkmarks stay on this page only.
Run checks updates this page only. Checkmarks stay on this page only. 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 submit your GitHub and Vercel URLs.
Delivery
Push an a2 branch on the same webdev-client repo and submit that branch’s Vercel URL.
a2 GitHub branch
Create, commit, and push a branch named a2 on the same public repository from A1. Submit your repository’s GitHub URL (the repository root or the …/tree/a2 branch URL both work). The URL must load.
3 pts · §2.5
Vercel branch deployment
Enable branch deployments so a2 has its own preview URL whose hostname contains -git-a2-, with Deployment Protection off.
3 pts · §2.5
Name and GitHub link
Labs still shows your full name and a link to your GitHub repository.
3 pts · §2.5
Labs still listed
app/labs/TOC.tsx and app/labs/page.tsx still link Lab 1 (/labs/lab1), Lab 2 (/labs/lab2), and Kambaz.
3 pts · §2.5
Lab — CSS, icons, and Tailwind
Build Lab 2 in app/labs/lab2. CSS samples stay on the lab page; Tailwind samples live under app/labs/lab2/tailwind/. Keep the book's wd-* ids on your samples, but a missing id never costs points: Run checks looks at what your CSS does to the page, not at ids or text.
Lab 2 page and CSS file
Create app/labs/lab2/page.tsx and index.css, import the CSS in the page, and link Lab 2 from the Labs index and TOC (href /labs/lab2).
3 pts · §2.1
Selectors
Practice the style attribute, then move rules into the CSS file with id, class, and document-structure selectors.
5 pts · §2.1.1
Color, border, and box model
Create the color, background, border, padding, margin, box-model, corner, dimension, and display samples and import them.
5 pts · §2.1.7
Position, float, flex, and media queries
Create the position, z-index, float, grid, flex, and media-query samples and import them.
5 pts · §2.1.13
Tailwind samples
Create every Tailwind section of §2.3 under app/labs/lab2/tailwind/: margins and padding, font size and weight, background colors, the five responsive samples (breakpoint color, show/hide, flex row, grid columns, spacing and text size), the responsive card, blurs, and a grid whose columns span. Each section is checked on its own.
5 pts · §2.3
Kambaz — Chapter 2 restyle
Restyle the prototype so navigation, Dashboard, Modules, and related screens start to resemble the target product. Editor and Account stay On your own. Run checks reads the CSS that reaches each screen (the styling the book builds with Tailwind), not ids, class names, or text. A screen styled a different way than the book is flagged Needs TA review and keeps its points.