Blank to Browser
Your first site, shipped.
From a blank file to a live portfolio at a public URL. HTML, CSS, vanilla JavaScript, React, Next.js, and a Vercel deploy — in the right order, with nothing skipped.
If any of this sounds familiar
You don’t need another tutorial.
You need a finished site.
- You’ve watched 30 hours of YouTube and still can’t build a real page from scratch.
- You’ve started ten React tutorials. None of them showed you the “put it on the internet” step.
- You think you need to “learn programming first” before frontend. You don’t.
- Your portfolio lives on localhost. Nobody has ever opened it on their phone.
- You can copy code from Stack Overflow, but you can’t explain why the page broke.
None of this is a talent problem. It’s a sequencing problem — tutorials are random; this course is ordered. By the end, you don’t just “know HTML” or “know React.” You have a deployed site.
What you walk away with
By the last unit, you will have:
Chapter 1
A real HTML page that opens in any browser
Chapter 2
A styled, responsive layout in vanilla CSS
Chapter 3
A portfolio with real interactive features (in plain JS)
Chapter 4
The same site rebuilt as React components
Chapter 5
A multi-page Next.js app with optimized images and metadata
Chapter 6
A live public URL anyone on cellular can reach
Throughout
A clear mental model from HTML up to deploy
Throughout
The confidence to learn the next framework yourself
The product is small on purpose — one portfolio, yours. The deeper artifact is the mental model: which layer of the web does which job, in what order, with what trade-offs. Once you have that, the next stack you learn (Vue, Svelte, a new framework that doesn’t exist yet) is just vocabulary.
Syllabus
6 chapters · 74 units
Every unit is four beats: principle → do → verify → reference.
Ch 1First PagePsychological11 units
A website is a file your browser reads. HTML is meaning, before look.
Ch 2LookMedium16 units
CSS is presentation, applied via selectors and the cascade. Layout is two primitives: flex and grid.
- 2.0What CSS actually is
- 2.1Selectors and specificity
- 2.2The box model
- 2.3Colors: hex, rgb, hsl, oklch
- 2.4Typography that doesn't fight you
- 2.5Display, flow, inline vs block
- 2.6Flex, part 1: direction + alignment
- 2.7Flex, part 2: wrap, gap, grow
- 2.8Grid, part 1: columns and gaps
- 2.9Grid, part 2: template areas
- 2.10Position: static, relative, absolute, sticky
- 2.11Mobile-first responsive design
- 2.12Transitions, hover, focus-visible
- 2.13CSS variables (custom properties)
- 2.14Dark mode the right way
- 2.15Your styled portfolio
Ch 3BehaviorMedium13 units
JavaScript is the page reacting to the user. Without it, the page is paper.
- 3.0Why JS at all
- 3.1Variables and types
- 3.2Operators and control flow
- 3.3Functions: declaration, expression, arrow
- 3.4Arrays and objects you'll actually use
- 3.5Loops and iteration
- 3.6The DOM: what an element actually is
- 3.7Reading and writing the page
- 3.8Events: listen, react, prevent
- 3.9Event delegation
- 3.10Fetch and async/await
- 3.11localStorage for persistence
- 3.12Your interactive portfolio
Ch 4ComponentsPEAK13 units
A component is a function that returns UI. The page is composed of components.
Ch 5AppMedium13 units
Next.js gives you routing, optimized assets, and a deploy target. You write components; it handles the rest.
- 5.0Why Next.js (over plain React)
- 5.1The app/ directory and file conventions
- 5.2Pages and routes
- 5.3Nested layouts
- 5.4Dynamic routes ([slug])
- 5.5Linking and navigating
- 5.6next/image: why not <img>
- 5.7next/font for Google + local fonts
- 5.8Metadata and OG cards
- 5.9loading.tsx and not-found.tsx
- 5.10Server vs Client components
- 5.11Data from a file (server-side)
- 5.12Your portfolio in Next.js
Ch 6LiveHigh point8 units
Local is not real. A site shipped is a site at a URL anyone can reach.
The format
Text-first. Hands on the keyboard.
Most beginner courses are 15-hour YouTube playlists. You watch someone else type. You feel like you’re learning. You aren’t. By the end, you have notes — not a site.
| Typical beginner course | This course | |
|---|---|---|
| Format | 5-15 hour videos | Written units |
| Order of topics | Random / topic-by-topic | Strictly progressive (HTML → CSS → JS → React → Next.js → Deploy) |
| What you do | Watch and code along | Read 2 min, then code your own portfolio for 15 min |
| How long until you do something | 10+ min of intro | ~2 minutes |
| Verification | “Did it work?” | Per-unit self-check (page renders / button clicks / URL loads) |
| End state | A demo on localhost | A deployed portfolio at your URL |
Every unit, four beats
- 1. Principle. One durable idea, stated in plain language.
- 2. Do. Hands on the keyboard. One concrete action on your own portfolio.
- 3. Verify. A check you can run yourself: page renders, button clicks, URL loads. No grader needed.
- 4. Reference.The worked answer — revealed only after you tried, so you can’t skim past the doing.
6 chapters · 74units · ~10–25 minutes per unit.
Full access
Unlock the full course.
- ✓All 6 chapters, 74 units, all future updates
- ✓All of Chapter 1 + the first 3 units of Chapter 2 open to read — taste it before you unlock
- ✓Each chapter ends with a self-rubric so you know exactly where you stand
Frequent objections
Honest answers.
Who is this for?
Absolute beginners and near-beginners. People who've maybe touched HTML or tried a React tutorial, but never built and deployed a real site. If you've shipped one in the last year, this course is below you — try Prompt to Production instead.
Do I need to know how to code already?
No. The first chapter assumes nothing — we install VS Code in unit 1.0. By the end of Chapter 3 you'll know enough JavaScript to write a small interactive feature. Chapters 4 and 5 layer React and Next.js on top.
Why HTML/CSS/JS before React?
Because React renders HTML. CSS styles it. JS is what React's hooks are doing under the hood. People who skip to React first end up with a foggy model of what's happening — every problem is magic. People who learn the layers first understand what React buys them and what it doesn't.
Why no Tailwind / CSS-in-JS?
Tailwind is great. It's also a layer of abstraction on top of CSS. Until you know the CSS underneath, Tailwind's classes are just spells. We use vanilla CSS in this course so you understand the actual model. Switching to Tailwind later is a one-day skill once the fundamentals are in place.
Why no TypeScript?
TypeScript is genuinely useful, but it's another language to learn on top of JavaScript. For a course aimed at getting you to a deployed site, the cognitive load isn't worth it. Once you're comfortable with JS, picking up TS is a weekend.
How long does the whole course take?
The name says four days. Honestly, plan for one to two weeks of evenings. Faster if you push; longer if you genuinely absorb each principle. Chapter 4 (React) is the densest — give it more time than the others.
What if I get stuck?
Every unit ends with a 'Reference' — the worked answer, locked behind 'I tried it.' If your code isn't matching, diff against the reference. The course has no human support; the reference IS the answer.
Why text instead of video?
Three reasons. (1) Text is searchable, skimmable, and re-readable in 30 seconds — video isn't. (2) Browser UIs and Vercel screens change every quarter; a video filmed in 2024 looks dated by 2025. Text explains the principle and survives the UI changing. (3) The course is do-shaped, not watch-shaped. Your hands should be on the keyboard inside two minutes of each unit.
Will this stay relevant?
The principles will. HTML hasn't fundamentally changed since 2014. CSS gets new tricks but the model is stable. React's API has been mostly stable since hooks (2019). Next.js evolves, but its conventions are documented and predictable. The 'today's implementation' examples in each unit are explicitly disposable; the principle survives a tool change.
The site only ships when you build it.
Chapter 1 is free and gets you to a real HTML page on your own machine. By the end of it you’ll know whether this format works for you.