Welcome to the Real Thing

Most people live on the surface of the web—scrolling, clicking, tapping. But beneath all of that, there's structure. Logic. Craft.

In this class, you'll learn to read and write the source code that powers the modern internet—with HTML and CSS, the way it actually works.

Everything you need lives right here—every week, every assignment, every tutorial. No need to dig through Canvas.

Course Weeks 11 weeks

Every week's assignments, activities, and tutorials—hosted on this site.

Setup
Setup & Onboarding
4 items
Week 1
Wh4t 15 W3b D35ign // Th3 F1r5t T4g
7 items
Week 2
D0cum3nt 4rch1t3ctur3
11 items
Week 3
Th3 C4sc4d3 B3g1n5
8 items
Week 4
<UL>TR4 L1STS, 4NCH0R P0W3R, & B0X M4G1C
6 items
Week 5
Week 5
5 items
Week 6
PhL3Xb0x a tR1but3
6 items
Week 7
reset, favicons and responsive design. OH MY.
6 items
Week 8
Pr0duct L4nd1ng
8 items
Week 9
Pr0duct L4nd1ng - C0d3d
5 items
Week 10
P0rtf0l10 Sy5t3m // Personal Brand Development
3 items

Interactive Tutorial Library Hands-on

Standalone, hands-on tutorials—open any of them and start building.

HTML 101 — Document Structure 7-lesson interactive series: the skeleton, nesting, attributes, classes, inline styles, and building blocks. Each lesson has a live CodePen. CSS Selector Quest The Selector Guild — a story-driven game for practicing CSS selectors, pseudo-classes, and the box model in a live CodePen workspace. The Story of the Box Hover and click elements to see their content, padding, border, and margin live. The box model, made visible. box-sizing — an interactive lesson Step through how content-box vs border-box changes the way width and height are calculated. Fonts & Google Fonts How web fonts work, how to load Google Fonts, and how to apply them with CSS. Interactive Flexbox Tutorial Build a two-column layout with a sticky-sidebar workspace. Flexbox properties, demonstrated as you change them. P4 Cut-Up — Figma to Semantic HTML5 Translate a Figma design into clean semantic HTML5 using AI as a co-coder. ScrollTrigger Patterns Scroll as a design material — animation patterns with GSAP ScrollTrigger. Animating SVG Icons with GSAP Prompt-first mode — animate SVG icons with GSAP and AI assistance. Theme Switcher — Practice Mode Practice building a light/dark theme switcher with CSS and a little JavaScript. Firefox DevTools Field Guide A 9-page field guide to the browser developer tools: the inspector, the console, reading errors, and keyboard shortcuts.

Student Pledge Required

$ "I will build my foundation tag by tag.
I will understand before I automate.
When I use AI, I will remain the architect.
I will review every suggestion.
I will know what my code does.
I will build with intent and intelligence."