Build a Great Website · Visual Playground

What makes a website "great"?

A great website isn't the most beautiful one. It's the one that helps the right person do the right thing quickly. Everything in this tutorial flows from that single goal.

"The best interface is the one that gets out of the way."

Four traits every great site shares:

Clear — within 5 seconds, a visitor can tell what it is and what to do next
Fast — loads in under 3 seconds, feels instant after that
Usable — works on every device, for every user, with any input method
Trustworthy — feels professional, has no broken links, is secure

1

Before you code

Plan — know who and what before how

The biggest sites fail because no one asked "who is this for?" Before opening a code editor, answer three questions in writing.

Who is the audience? One sentence. "A hiring manager reviewing my portfolio" is better than "anyone interested in web design."
What is the ONE goal? One primary action per page. "Book a consultation" or "View my work" — not both.
What does success look like? A measurable outcome: 50 newsletter signups, 10 demo requests, 100 unique portfolio visits.
Sitemap first — list every page and how they link before designing any of them
Content inventory — what do you actually have to fill each page? Don't design for imaginary content

Rule of thumb: If you can't explain your site's purpose in one sentence, visitors won't figure it out either.

2

Shape the structure

Wireframe — sketch before you style

A wireframe is a no-color, no-font, gray-boxes layout. It forces you to solve the structure problem before the decoration problem.

Sketch on paper first — a pencil and scrap paper beats opening Figma cold
Mobile layout first, then desktop — constraints sharpen decisions
Show hierarchy with size and position — the biggest box is the most important thing
One hero, one primary CTA, per page
F-pattern for text-heavy, Z-pattern for hero-style pages — eye-tracking research favors both
Leave room for whitespace — crowded wireframes lead to crowded sites

Move to Figma / Sketch / Penpot only after you can't answer a layout question with a pencil.

3

Write what you'll show

Content — write real copy, not "Lorem ipsum"

Design decisions made with placeholder text fall apart with real content. Write your headlines, subheads, and body copy before finalizing layouts.

Headlines < 8 words — if it wraps on mobile, rewrite it
Subheads answer "and...?" — one line that extends the headline's promise
Paragraphs < 3 sentences — see the Make Words Visual tutorial for the full playbook
One reading level for all content — aim for 8th grade (Hemingway app checks this free)
Active voice over passive — "We shipped it" beats "It was shipped"
Button text = what happens when clicked — "Download the guide" beats "Click here"
No corporate jargon — "synergize" and "best-in-class" mean nothing

4

Your visual system

Design system — decide once, use everywhere

A design system is the set of consistent choices — colors, fonts, spacing, components — applied across every page. It's what makes a collection of pages feel like one site.

2 fonts max — one display, one body. Google Fonts has thousands of great free ones
5-color palette — background / surface / text / primary / accent. See the Color Lab
Type scale — 6 sizes is plenty (12 / 14 / 16 / 22 / 32 / 48 px). Use ratios (1.25× or 1.33×)
Spacing scale — 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px. Use CSS custom properties
One corner-radius style — 4, 8, or 12 px. Mixing radii feels inconsistent
Design tokens in CSS custom properties — change once, apply everywhere
Apply the 60/30/10 color rule — 60% neutral, 30% secondary, 10% accent

Every polished site boils down to: limited palette + strong type scale + consistent spacing. The rest is photos and icons.

Deep dive: Design Principles · Color Lab · Fonts

5

Write the code

Build — semantic HTML, mobile-first CSS

Start with proper HTML landmarks and headings. Style mobile first, add breakpoints only when the layout breaks.

One <h1> per page, headings in order (h1 → h2 → h3)
Use semantic elements: <header>, <nav>, <main>, <section>, <article>, <footer>
Mobile-first CSS — style small screens first, use @media (min-width: ...) to enhance
CSS Grid for layout, Flexbox for component internals — not the other way around
Custom properties for theming — var(--primary) beats hardcoded hex everywhere
Responsive units: rem for sizing, % / vw / fr for widths
aspect-ratio on media — prevents layout shift when images load
Don't reinvent — <details> for accordions, <dialog> for modals, <input type="search"> for search

See also: HTML · High-Level CSS · Layout · Flexbox · Grid

6

Make it fast

Performance — every second costs users

Every 1-second delay costs ~7% of conversions (Akamai). A great site feels instant — under 2.5s to Largest Contentful Paint.

Optimize images — convert JPG/PNG → WebP or AVIF. Squoosh.app does it for free
Lazy-load below-fold images — <img loading="lazy"> is a one-line win
Serve responsive images — srcset + sizes delivers smaller files to phones
Set width + height on images — prevents Cumulative Layout Shift
Subset your fonts — include only the weights/characters you use
Use font-display: swap — text appears immediately, font swaps in
Minify CSS / JS — most hosts do this automatically
Defer non-critical scripts — <script defer> or async
Host on a CDN — Netlify, Vercel, Cloudflare Pages all free

Targets: Under 2.5s Largest Contentful Paint. Under 100ms First Input Delay. 0 (near-zero) Cumulative Layout Shift. Test at PageSpeed Insights.

7

For everyone

Accessibility — the non-negotiable

Accessibility isn't an add-on. It's how your site works for keyboard users, screen readers, people on slow connections, and everyone using it on a sunny day. Build it in from day one.

Every image has meaningful alt — or empty alt="" if decorative
Text contrast > 4.5:1 for body, 3:1 for large text. Test at WebAIM
Keyboard-navigable — Tab, Enter, Esc work everywhere
Visible focus ring — never outline: none without a replacement
Every input has a <label> — placeholder ≠ label
Color isn't the only signal — pair red errors with an icon or word
Respect prefers-reduced-motion — disable large animations when requested
Add a skip link — first focusable element jumps past nav

Full tutorial: Accessibility Tutorial

8

Be findable

SEO — the basics that cover 90%

You don't need SEO tricks. You need to make sure search engines (and social media previews) can read your site correctly.

Descriptive <title>s — 50–60 chars, unique per page. This is the big blue Google link
Meta description — 150–160 chars summarizing the page
Semantic HTML — headings in order, <main>, <article> matter for SEO too
Open Graph tags — og:title, og:description, og:image for social previews
Descriptive URLs — /about-us beats /page?id=47
One <h1> per page — search engines use it as the topic signal
Internal linking — crawlers (and users) find pages through each other
Submit a sitemap.xml to Google Search Console. Free and takes 5 minutes
HTTPS, mobile-friendly, fast — all three are Google ranking factors

<!-- The meta-tag minimum for a great page -->
<title>Visual Playground — HTML & CSS learning lab</title>
<meta name="description" content="40+ interactive labs for students...">
<meta property="og:title" content="Visual Playground">
<meta property="og:image" content="https://yoursite.com/og.png">

9

Before launch

Test — don't trust your dev machine

Your site looks perfect on your 4K laptop with fiber internet. Now check it on a 3-year-old phone on 4G. That's where real users live.

Real devices — an actual iPhone, an Android, a cheap tablet. Chrome DevTools emulation lies
All browsers — Chrome, Safari, Firefox at minimum. Edge if you're shipping enterprise
Keyboard-only test — unplug your mouse, navigate the site with Tab, Enter, Esc
Screen reader test — turn on VoiceOver (Mac) or NVDA (Windows) and listen to one page
Lighthouse audit — Chrome DevTools → Lighthouse. Aim for 90+ on Performance, A11y, SEO
Run WAVE on each page for an automated a11y check
PageSpeed Insights — pagespeed.web.dev for real Core Web Vitals
Check Security Headers at securityheaders.com — aim for A or higher
Run spellcheck — typos are the #1 professionalism killer on small sites

Test with a real human before launch. Ask a friend who hasn't seen the site: "What is this for?" If they can't answer in 5 seconds, your hero section needs work.

10

Ship it

Launch & iterate — the site is never done

Launch isn't an ending. The best sites improve every month based on real data.

Deploy to a proper host — Netlify, Vercel, Cloudflare Pages, or GitHub Pages. Free HTTPS built in
Custom domain — yourname.com beats yourname.netlify.app for trust
Install analytics — Plausible or Umami (privacy-friendly), or GA4 if you must
Add a favicon.ico and apple-touch-icon.png — small but obvious when missing
Monitor uptime — UptimeRobot has a generous free tier
Listen — ask 3 people what confused them, fix the most common thing
Dependabot on — let GitHub warn you about outdated dependencies (see Security)
Revisit quarterly — content gets stale, goals shift, browsers improve