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.
A$29 one-time. Lifetime access. No subscription.
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 · 74units · ~22 hours
Every unit is four beats: principle → do → verify → reference. Free units unlock immediately. Paid units unlock after purchase.
Ch 1First PagePsychological11 units· ~141 min
A website is a file your browser reads. HTML is meaning, before look.
- 1.0Setupfree12 min
- 1.1What the web actually isfree10 min
- 1.2Document structurefree12 min
- 1.3Headings and paragraphsfree10 min
- 1.4Links and anchorsfree12 min
- 1.5Lists, when each is rightfree10 min
- 1.6Imagesfree12 min
- 1.7Semantic tags vs. div soupfree15 min
- 1.8Forms 101free18 min
- 1.9Meta and the headfree10 min
- 1.10Your portfolio (HTML only)free20 min
Ch 2LookMedium16 units· ~285 min
CSS is presentation, applied via selectors and the cascade. Layout is two primitives: flex and grid.
- 2.0What CSS actually isfree10 min
- 2.1Selectors and specificityfree18 min
- 2.2The box modelfree15 min
- 2.3Colors: hex, rgb, hsl, oklch12 min
- 2.4Typography that doesn't fight you15 min
- 2.5Display, flow, inline vs block15 min
- 2.6Flex, part 1: direction + alignment20 min
- 2.7Flex, part 2: wrap, gap, grow20 min
- 2.8Grid, part 1: columns and gaps20 min
- 2.9Grid, part 2: template areas22 min
- 2.10Position: static, relative, absolute, sticky18 min
- 2.11Mobile-first responsive design22 min
- 2.12Transitions, hover, focus-visible15 min
- 2.13CSS variables (custom properties)15 min
- 2.14Dark mode the right way18 min
- 2.15Your styled portfolio30 min
Ch 3BehaviorMedium13 units· ~234 min
JavaScript is the page reacting to the user. Without it, the page is paper.
- 3.0Why JS at all10 min
- 3.1Variables and types15 min
- 3.2Operators and control flow15 min
- 3.3Functions: declaration, expression, arrow18 min
- 3.4Arrays and objects you'll actually use20 min
- 3.5Loops and iteration15 min
- 3.6The DOM: what an element actually is18 min
- 3.7Reading and writing the page18 min
- 3.8Events: listen, react, prevent20 min
- 3.9Event delegation18 min
- 3.10Fetch and async/await22 min
- 3.11localStorage for persistence15 min
- 3.12Your interactive portfolio30 min
Ch 4ComponentsPEAK13 units· ~262 min
A component is a function that returns UI. The page is composed of components.
- 4.0Why React12 min
- 4.1JSX is just JavaScript15 min
- 4.2Your first component18 min
- 4.3Props: data into components18 min
- 4.4State with useState22 min
- 4.5Effects with useEffect22 min
- 4.6Refs with useRef18 min
- 4.7Lists and keys18 min
- 4.8Controlled forms22 min
- 4.9Lifting state up22 min
- 4.10Composition vs config (children)18 min
- 4.11Custom hooks22 min
- 4.12Your portfolio in React35 min
Ch 5AppMedium13 units· ~238 min
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)12 min
- 5.1The app/ directory and file conventions15 min
- 5.2Pages and routes15 min
- 5.3Nested layouts18 min
- 5.4Dynamic routes ([slug])20 min
- 5.5Linking and navigating15 min
- 5.6next/image: why not <img>18 min
- 5.7next/font for Google + local fonts15 min
- 5.8Metadata and OG cards18 min
- 5.9loading.tsx and not-found.tsx15 min
- 5.10Server vs Client components22 min
- 5.11Data from a file (server-side)20 min
- 5.12Your portfolio in Next.js35 min
Ch 6LiveHigh point8 units· ~130 min
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.
Pricing
A$29. One-time. Lifetime access.
- ✓All 6 chapters, 74 units, all future updates
- ✓All of Chapter 1 + the first 3 units of Chapter 2 are free — taste it before you pay
- ✓No subscription, no upsell, no email drip
- ✓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.