Most "build a landing page in a day" tutorials quietly smuggle in a Next.js setup, a Vercel deploy, a CMS, and a style library. By the time you've followed along, you have three tools you'll forget to cancel next month and a landing page that took a week.
This is the opposite approach: one HTML file, one CSS file (optional), one deploy target. Deadline-driven, framework-free. Here's the four-hour timebox I use.
Put the hero first. Everything else is distraction. The hero needs:
Tailwind CDN handles styling. Paste this into your `<head>`:
```html <script src="https://cdn.tailwindcss.com"></script> ```
Skip the build step. CDN Tailwind is 3KB slower than JIT-compiled, and your user doesn't care.
Pick three, not six. The three that convert:
1. **Feature grid** — three cards, each an action the product performs. Not three adjectives. 2. **Social proof** — one testimonial is better than five. Pick the one with a named human and a company you'd put on a slide. 3. **Pricing** — one tier, maybe two. Never three unless you've already shipped and measured.
Skip: comparison tables, FAQ accordion, blog preview, partner logos. Those are for v2 after you know anyone wants v1.
This is what separates a "made it in an afternoon" page from a "is this a template?" page. Pick ONE of:
Don't do more than one. Pick the one that fits the product's mood. A serious B2B tool gets the counter. A creative tool gets the cursor.
Upload the HTML file to any static host. Cloudflare Pages is the one I use for freelance work: free, zero config, custom domain in two minutes. Netlify and Vercel also work.
Add the three meta tags most founders forget:
```html <meta property="og:image" content="https://yourdomain.com/og.png"> <meta property="og:title" content="Product name — outcome"> <meta name="twitter:card" content="summary_large_image"> ```
Create `og.png` as a 1200×630 image — even a screenshot of your hero works. This is what gets shared on Twitter and Slack.
An afternoon page is not a final page. It is a shipped page. You'll iterate it for weeks. But iterating a live page is ten times cheaper than perfecting a dead one.
If you want to start from a reference that already implements every pattern above — custom cursor, scroll animations, pricing toggle, dark mode, single-file deploy — that's the template I shipped as Orbit. It's the version I use when I need to produce a page by end-of-day for a client.
But the real point is the timebox. Afternoon. One file. One deploy. Ship it.