HTML & CSS Foundations
Master the language of the page from absolute zero to production UI
Phase Goal
Go from a blank file to building and styling useful public-interest interfaces with raw CSS and Tailwind — covering the full CSS foundations sequence before finishing with an original, responsive neighborhood-resource portal pushed to GitHub.
Open the written lectures for this course before checking off the phase topics.
Day 1: HTML Foundations — Your First Real Web Page
Community Noticeboard v0 (deployed)
A semantic, accessible noticeboard for a neighborhood repair cafe with an event summary, venue image, contact links, and a public GitHub Pages URL. Plain HTML only — presentation comes later.
Day 2: HTML Forms, Inputs, Tables, and Element Flow
Equipment-loan request desk
Build a realistic equipment-loan request with proper labels, validation, proof upload, grouped choices, a native FAQ using details/summary, and a comparison table for borrowing plans.
Day 3: CSS Foundations — Selectors, Color, Text, Units
Transit disruption bulletin
Style a transit disruption bulletin so severity, affected stops, and alternatives scan correctly — a restrained palette, real type hierarchy, balanced line-height, accessible links, and honest interaction cues.
Day 4: The Box Model — Spacing, Borders, Shadows
Museum object-label set
Build compact, featured, and caution object labels using only the box model, borders, radius, and shadow. Hold content width and spacing constant so visual treatment—not accidental geometry—creates hierarchy.
Day 5: Display, Position, Pseudo, and Backgrounds
Night-walk safety advisory
Build a safety advisory header with a mapped-route background, legible gradient overlay, centered alert summary, a route-download action with complete hover/focus states, and a restrained pseudo-element marker.
Day 6: Overflow, Lists, Object-fit, Filters & Float
Wildlife field-note reader
Build a field-note reader with custom observation lists, a scrollable specimen log, consistently cropped habitat images, purposeful filter states, and one float-based identification note that you then refactor to modern layout.
Day 7: Flexbox — One-Dimensional Layout Mastery
Food-bank shift roster
Build a row of morning, afternoon, and evening volunteer shifts using only Flexbox. Handle equal-width panels, wrapping, aligned signup actions, and a clearly emphasized urgent shift.
Day 8: CSS Grid — Two-Dimensional Layout Mastery
Watershed monitoring report
Build a report shell with a summary, metric grid, sampling-site map, findings, and field quotes. Use Grid for page structure and deliberate track control rather than trial-and-error spacing.
Day 9: Media Queries — The Conditional Layer of CSS
Library room-availability tile
Build one room-availability component that changes layout by container width, preserves status contrast in dark mode, disables motion when requested, and is verified across viewport widths and pointer modes.
Day 10: Fluid Sizing & Responsive Patterns
Responsive evacuation-center finder
Build a center-finder results slice that remains usable at 320px, 375px, 768px, 1024px, and 1440px using intrinsic layouts, clamp(), responsive maps/images, and only the media/container queries the content proves it needs.
Day 11: Transitions, Transforms, and Animations
Parcel-status motion language
Add a coherent motion layer to a parcel tracker: button feedback, status-card emphasis, timeline entrance, a loading skeleton, and a reduced-motion path that preserves every state change without animation.
Day 12: Tailwind Foundations — Utility-First Mastery
Clinic appointment queue (Tailwind)
Rebuild a clinic appointment queue in Tailwind using only utilities. Match a supplied raw-CSS reference exactly, then record which utility choices improved iteration and which reduced clarity.
Day 13: Tailwind Components, Theming & Practice
Civic Service Pattern Library
Ship a single reference page containing buttons, inputs, service cards, navigation, an alert header, process steps, resident quotes, eligibility panels, FAQ, actions, and footer — themed, dark-mode-ready, responsive, and written for plain-language public service.
Day 14: UI/UX Principles + Neighborhood Resource Portal
Neighborhood Resource Portal
Phase 1 capstone: ship an original Tailwind portal where residents browse services, open a service detail, scan community updates, and inspect an organization profile. Derive the information hierarchy from a supplied content brief, publish it, and document accessibility, responsive, and intentional simplification decisions.
Phase Complete!
After this phase, you'll be able to:
- Write semantic HTML and forms from a blank file with no autocomplete
- Style any page from zero using selectors, the box model, position, and pseudo-elements
- Build any layout with Flexbox or Grid and know which one to reach for
- Make every page work at 320px, 768px, and 1440px without trial-and-error
- Add tasteful motion that respects prefers-reduced-motion
- Build production marketing UI in Tailwind with a theme, dark mode, and a real component system
- Reconstruct a professional interface from content and constraints without copying a branded product
You shipped an original neighborhood-resource portal plus a civic-service Tailwind pattern library, both accessible, responsive, documented, and live.