</> The Field Manual · web design in 30 days Get the course — $29

Self-paced · zero to hire-ready · 100% free tools

Stop collecting tutorials. Follow one plan for 30 days.

The Field Manual is a complete, sequenced web design curriculum: every day tells you exactly what to learn, exactly what to build, and exactly which free resources are worth your time. By Day 30 you've shipped a live, professional site — and a portfolio to prove it.

Start Day 1 — $29 One-time purchase. Yours forever, works offline.
30
Structured days
4
Hands-on projects
80–95
Total hours
90+
Curated resources

The problem this solves

The internet has every lesson you need. What it doesn't have is an order.

Free resources like MDN, freeCodeCamp, and YouTube are world-class — and overwhelming. Most self-taught learners quit not because the material is too hard, but because nobody tells them what to do today. The Field Manual is that missing layer: a day-by-day operating plan built around the web's best free material, so you spend your energy learning, not deciding.

Every day · 1

The Mission

One clear goal for the day, in one sentence. You always know why today matters.

Every day · 2

Learn

Focused, original teaching — the mental models and the "why," not just syntax.

Every day · 3

Build

Numbered hands-on steps. You write real code every single day, from Day 1.

Every day · 4

Resources

2–3 hand-picked free links — the best of MDN, videos, and practice games. No rabbit holes.

Every day · 5

Checkpoint

Self-test questions. If you can answer them, you're ready for tomorrow.

Full curriculum · nothing hidden

All 30 days, exactly as you'll get them.

Four weeks, each ending in a project that forces you to synthesize what you learned. Skills compound — you do them in order.

Week 1 · Days 1–7

Foundations & HTML

How the web actually works, and the language every page is made of.

  1. D1How the web works — and building your workshop
  2. D2HTML structure & semantic elements
  3. D3Links, media, tables & forms
  4. D4CSS foundations — selectors, cascade & the box model
  5. D5Typography, spacing & units
  6. D6Flexbox — your first real layout system
  7. D7Project: your personal profile site
Week 2 · Days 8–14

CSS & Design Craft

From styling boxes to real layout, responsiveness, and design principles.

  1. D8CSS Grid — two-dimensional layout
  2. D9Responsive design & mobile-first
  3. D10Transitions, transforms & animation
  4. D11Design principles — the eye behind the code
  5. D12Color theory & building palettes
  6. D13Typography in design — pairing & type systems
  7. D14Project: a responsive landing page
Week 3 · Days 15–21

JavaScript & Tools

Make pages interactive, talk to data, and adopt a professional workflow.

  1. D15JavaScript fundamentals
  2. D16The DOM & events — making pages react
  3. D17Building interactive UI components
  4. D18Async JavaScript & working with APIs
  5. D19Git, GitHub & version control
  6. D20Modern tooling & the ecosystem
  7. D21Project: an interactive, data-driven site
Week 4 · Days 22–30

Pro Practice & Launch

UX, design systems, accessibility, performance — then ship it live.

  1. D22UX fundamentals — designing for people
  2. D23UI design in Figma
  3. D24Design systems & reusable components
  4. D25Utility-first CSS, Tailwind & modern architecture
  5. D26Accessibility (a11y) deep dive
  6. D27Performance & SEO
  7. D28Deployment — taking sites live
  8. D29Capstone: a complete, professional site
  9. D30Portfolio, career & never stop learning

What you get

One file. No subscription. No lock-in.

  • The complete 30-day interactive course — a single self-contained file that runs in any browser.
  • Built-in progress tracking — mark days done, pick up where you left off.
  • 4 portfolio projects + a capstone you ship live on the real internet.
  • 90+ hand-curated free resources — the signal, filtered from the noise.
  • Works offline, forever. Download once; it's yours. Light and dark mode included.
  • Every tool in the course is free — VS Code, Figma, GitHub, Netlify. Your only cost is this manual.

Honest fit check

Who this is for.

Buy it if

  • You're starting from zero, or restarting after a stalled attempt.
  • You can give it roughly 2–4 focused hours a day for a month.
  • You want structure and momentum, not another pile of bookmarks.

Skip it if

  • You want hours of video lectures — this is a text-first, build-first course.
  • You're already a working front-end developer.
  • You expect to learn passively. Every single day, you build.

Pricing

Less than a month of any subscription platform.

Course platforms charge $30–60 per month and bet you'll quit. This is a one-time purchase with a finish line.

The Field Manual · Complete
$29
One-time · yours forever
  • All 30 days, all 4 weeks, the full capstone
  • Interactive progress tracking
  • 90+ curated free resources
  • Works offline in any browser
  • Free updates to this edition
Get instant access — $29

14-day guarantee: finish Week 1 and don't feel the difference? Full refund, no questions.

Questions

Before you ask.

Do I need any experience to start?

No. Day 1 assumes you've never written a line of code — it starts with how the web works and setting up your tools. The pace is designed for a true beginner who shows up daily.

How much time does it take per day?

Most days are 2–3 hours; project days run 3–4, and the capstone is 5–6. If a day runs long, take two — the "30 days" is a structure, not a stopwatch. The sequence is what matters.

Isn't all this information free online?

Yes — and the course links you straight to the best of it. What you're buying is the thing the free internet can't give you: the sequence, the daily build assignments, the curation, and the momentum. It's the difference between owning a gym and having a training plan.

What exactly do I receive after buying?

A single HTML file — the complete interactive course. Open it in any browser, on any computer, online or offline. Your progress saves automatically in your browser. No account, no app, no DRM.

Is this video-based?

No. It's text-first and build-first: focused written lessons plus hands-on assignments, with hand-picked free videos linked where video genuinely teaches better (layout, for instance). If you only learn from lectures, this isn't your course.

What will I be able to do by Day 30?

Design and build responsive, accessible, professional websites from scratch — HTML, CSS, JavaScript, Figma mockups, Git, and live deployment — with four shipped projects and a capstone in your portfolio to show for it.

Day 1 is waiting

A month from now, you'll have shipped a real website. Or you'll have another folder of bookmarks.

Thirty days, one plan, no decisions to make except showing up.

Start the Field Manual — $29