JavaScript Curriculum
"You've just been asked to build a coffee shop website from scratch. No framework, no template — just a blank file and a browser."
Build the foundation of the web. Learn how browsers parse markup, how to structure content semantically, and how CSS transforms raw HTML into polished, responsive interfaces.
What you'll ship
A fully structured, semantic website for a local coffee shop — with forms, navigation, images, and proper HTML throughout.
Lessons
Your First Webpage
HTML Document Structure
Text on the Page
HTML Text Elements
Linking Things Together
Anchor Tags and URLs
Lists and Structure
HTML Lists
Images and Media
HTML Images and Accessibility
Forms and Inputs
form, input types, label, button, select, textarea
Semantic HTML
header, nav, main, section, article, aside, footer
Tables
table, thead, tbody, tfoot, tr, th, td, colspan, rowspan
Introducing CSS
selectors, properties, values, linking a stylesheet
The Box Model
margin, border, padding, content, box-sizing
Typography
font-family, font-size, font-weight, line-height, text-align
Colors and Backgrounds
color, background, rgba, hex, hsl, gradients
Display and Positioning
display (block/inline/flex), position types, z-index
Flexbox
flex container, justify-content, align-items, flex-wrap, gap, flex-grow
CSS Grid
grid-template-columns, grid-template-rows, grid-area, gap, placement
Responsive Design
media queries, mobile-first, viewport meta, fluid units
Transitions and Animations
transition, @keyframes, animation properties, timing functions
CSS Variables and Theming
--custom-properties, :root, var(), theming patterns, dark mode
Specificity and the Cascade
specificity scoring, the cascade, inheritance, !important, source order
Capstone — Build a Profile Card
Semantic HTML + Flexbox/Grid + Responsive + CSS Variables + Transitions