Ship a Landing Page

What it does

Chains five skills into one clean path from empty folder to a live, fast, accessible landing page: bones, skin, sections, a form, and a performance pass — no framework required, no template-shop markup.

What you need

• A text editor (or Cursor) and any AI chat
• Your content: what the page is for, the sections it needs, your colors/fonts
• A free static host (Netlify drop, Cloudflare Pages, GitHub Pages)
• The five skills: Semantic HTML Skeleton, Fluid CSS System, Landing Section Layout, Lead Capture Form, Frontend Performance Audit

The workflow (in order)

1. Semantic HTML Skeleton — get the page bones right first: semantic tags, images sized so nothing jumps, accessible structure. Save as index.html.
2. Fluid CSS System — feed it your colors and fonts; get design tokens, fluid type, Grid/Flex layout, and a real dark mode. Save as style.css.
3. Landing Section Layout — build one reusable, scannable section pattern, then repeat it down the page for each block (services, features, proof). Consistency here is what makes it look designed.
4. Lead Capture Form — add the accessible contact/signup form, asking for the minimum. Wire it to your host's form handler or an endpoint.
5. Deploy, then Frontend Performance Audit — put it live (drag the folder to Netlify), run it through PageSpeed Insights, paste the real numbers into the audit, fix the top item, re-measure.

Maintenance habits

• Keep the CSS variables as your single source of truth — restyle by changing tokens, not chasing hex codes through the file.
• Re-run the performance audit after adding anything heavy (a video, a third-party script).
• Every image gets width/height (or aspect-ratio) forever — it's the cheapest way to keep the layout from jumping.