Interactive Guide

Anatomy of a Webpage

Every great website follows the same fundamental structure. Poke at it, hover it, tab through it. This page teaches by letting you take it apart.

See the blueprint Learn the sections

Visual blueprint

The Anatomy Revealed

Five markers, five roles. Hover or tab to each one. Every marker here is a real, focusable button, not just a mouse-only hover trick.

  • Navigation
  • Hero
  • The Fold
  • Content
  • Footer
https://creativepea.com
<nav> NavigationThe wayfinding system. Logo left, links right. Keep it under 7 items. Brand   Home   About   Services   Contact
<header> HeroYour value proposition in 6–8 words. One CTA. Make it count. Your Main Headline Here. Supporting text that explains your value proposition. Get Started
100vh The FoldEverything above here is seen without scrolling. Put your best content here. The Fold
<section> ContentFeatures, benefits, social proof. Use clear headings and whitespace. Features section: three cards go here
<footer> FooterContact info, social links, legal pages. Where skeptics look for trust. About   Privacy   Terms   Contact

Five pieces, seen in isolation. Want to see them assembled into a real homepage, start to finish?

Reading patterns

How Eyes Move

pattern

F-Pattern Reading

Users scan text-heavy pages in an F-shape: top-left to right, then down the left side. One of the more rigorously studied patterns in web UX, from Nielsen Norman Group's eye-tracking research.

pattern

Z-Pattern for Landing

On image-heavy, low-text pages, eyes tend to move in a Z: top-left, top-right, diagonal down, bottom-left to right. It's a looser heuristic than the F-pattern, more of a starting hypothesis than a law.

grid

The 8pt Grid System

All spacing uses multiples of 8px. It creates visual rhythm and makes responsive design predictable. It's the same convention behind Google's Material Design spacing scale.

Building blocks

The Essential Sections

Master these six elements and you'll understand most of web design.

01 <header>

The Hero

The first thing visitors see. Makes or breaks the first impression.

  • Keep copy concise: aim for 6–8 words in the headline
  • Use one clear call-to-action, not five
  • Hero images should support, not distract from, the message
02 <nav>

Navigation

The roadmap to your content. Should be invisible until needed.

  • Maximum 7 items in primary navigation
  • Logo always links home
  • Current page should be visually distinct
03 100vh

The Fold

The visible area before scrolling. People do scroll, but this space still gets disproportionately more attention.

  • Core value proposition must be above the fold
  • Include a scroll indicator if content continues
  • Don't cram everything in. Tease what's below
04 <h1>–<h6>

Typography Hierarchy

Visual hierarchy through type creates scannable content.

  • Limit to 2–3 font families maximum
  • Use consistent heading sizes (H1 > H2 > H3)
  • Body text: 16–18px for screens
05 margin

Whitespace

The breathing room that makes content digestible.

  • More whitespace often reads as more premium
  • Use consistent spacing units (8px base)
  • Let important elements breathe
06 <footer>

Footer

The last impression. Where skeptical visitors look for legitimacy.

  • Include contact info and social links
  • Secondary navigation for SEO
  • Copyright and legal links belong here

Type system

Typography Scale

Consistent type sizes create hierarchy and make content scannable. This scale is live. It's the same Fredoka/Nunito pairing driving every heading on this page.

H1 · 48–80pxMain Headlines
H2 · 32–48pxSection Headers
H3 · 24pxSubsection Headers
Body · 16–18pxRegular paragraph text for reading. Line height should be 1.5–1.7 for comfortable reading.
Caption · 12–14pxLABELS, METADATA, AND SMALL PRINT

8pt grid

Spacing System

Consistent spacing creates visual rhythm. Every value below is a real multiple of 8, rendered at true size.

8
Tight
16
Default
24
Relaxed
32
Loose
48
Section
64
Major

Boxes are one thing. Here's the same 8pt system applied to an actual card, next to a card that ignores it.

✗ Ignores the grid

Weekly Digest

Your top stories, curated every Monday morning.

Subscribe

✓ Follows the 8pt grid

Weekly Digest

Your top stories, curated every Monday morning.

Subscribe

Pro tip: use 8px for inline elements, 16px for related items, 24–32px between groups, and 48–96px between major sections.

Interaction design

Button States

Every button has at least four states, plus two more people tend to forget: focus, and whatever happens while it's working. These aren't illustrations. Hover, click, and tab to the buttons below to trigger each state for real.

Default / Hover / Active
Rest, hover, and click. Each one triggers a real CSS state, not a label.
Focus
Tab to this button with your keyboard to see the focus ring. It's required for anyone not using a mouse.
Disabled
Genuinely inert, using the native disabled attribute, not a style trick.
Loading
Click it. A real async action takes time, and a button that just sits there makes people click it twice.
Success
Confirming a completed action closes the loop. Without it, people re-click just to be sure it worked.

Button Styles Through Time

States are one axis. Style trend is another. The same "click me" rectangle has gone through a lot of looks.

Submit Skeuomorphic ~2000s–2012

Gradients, bevels, and drop shadows made buttons look like real, physical, pressable objects.

Submit Flat Design ~2013–2016

iOS 7 killed the gloss overnight. Solid color, no shadow, no gradient. Just shape and label.

SUBMIT Material Design ~2014–2019

Google's answer to flat: keep it simple, but add a soft "elevation" shadow so it still reads as liftable.

Submit Neumorphism ~2020

Soft UI: a button carved from the same surface as its background, using only light and shadow.

Submit Neo-Brutalist Now

Thick borders, hard offset shadows, zero subtlety. This page's own buttons are a softer cousin of this style.

Submit Pill / Rounded-Full Now

Fully rounded ends, minimal chrome. The default look of most modern SaaS and mobile apps today.

Stacking context

Z-Index: The Layer Cake

Z-index controls stacking order. It's not random. It's an org chart: modal at 1000, sticky nav at 100, dropdowns at 10, content at 1.

z-index: 1 · Base content layer
z-index: 10 · Dropdowns & tooltips
z-index: 100 · Sticky navigation
z-index: 1000 · Modals & overlays

Structure

Semantic HTML: The Layer Underneath

These two mockups render identically. Same boxes, same text, same position on screen. One of them is invisible to a screen reader. Toggle the outline to see which.

div › div › div › div › div

Logo   Home   About   Contact
Article title and a paragraph of body text sit here.
Related links
© Copyright

header › nav › main › article + aside › footer

Logo
Home   About   Contact
Article title and a paragraph of body text sit here.
Related links
© Copyright
SEE

Sighted users never notice the difference. Both mockups look pixel-identical. The gap is entirely in the layer underneath what you can see.

HEAR

Screen readers build a navigable outline from real landmark elements. A wall of divs gives them nothing to build it from.

CRAWL

Search engines and browser reader-modes lean on <main> and <article> to figure out what the actual content is, separate from nav and chrome.

Inclusive design

Accessibility: Design for Humans

Build for everyone. Not everyone uses a mouse. Not everyone can see your colors.

ALT

Describe images for screen readers by their function, not just their contents. "Team celebrating a product launch" beats "IMG_4829.jpg."

3:1 / 4.5:1

WCAG AA needs 4.5:1 contrast for normal text, but only 3:1 for large text (18px+, or 14px+ bold) and UI component borders.

TAB

Tab through your site. If you can't reach something without a mouse, it's broken. Every marker and demo on this page is a real, focusable element.

ARIA

Use ARIA to help screen readers understand interactive elements that native HTML can't describe alone, but reach for semantic HTML first and ARIA second.

FOCUS

Every focusable element needs a visible focus indicator. It's easy to forget because a mouse never triggers it. See the Button States demo above.

<button aria-label="Close modal">✕</button>
<img src="hero.jpg" alt="Team celebrating a product launch">

Behind the scenes

What the Eye Can't See

Every page quietly collects more than what's on screen. Here's what that is, why it needs disclosing, and where the paperwork actually comes from.

TRACK

Cookies & tracking. Small files or scripts that remember who a visitor is between visits: login sessions, shopping carts, analytics like Google Analytics, ad pixels like Meta's. First-party cookies come from the site itself; third-party ones come from someone else's script running on it, usually for advertising.

PRIVACY

Privacy Policy. A page disclosing what data gets collected, why, and what a visitor can do about it. Legally required in most places (GDPR in the EU, CCPA in California) for almost any site running analytics or a contact form, not just stores.

TERMS

Terms of Service. The rules for using the site: acceptable use, liability limits, who owns what. Not always legally required, but it's what protects the business if something goes wrong.

Where to actually get one: free generators like Termly, GetTerms, and PrivacyPolicies.com produce a reasonable starting template for a small site. If the site handles payments, health data, or anything sensitive, a template stops being enough, and it's worth paying an actual lawyer. This is general orientation, not legal advice.

Under the hood

Performance (And How to Prove It)

A beautiful page that takes eight seconds to load loses people before they see it. Here's what actually gets measured, in three numbers.

LCP

Largest Contentful Paint: how fast the main content appears. Good is under 2.5 seconds.

INP

Interaction to Next Paint: how fast the page responds to a click or tap. Good is under 200 milliseconds.

CLS

Cumulative Layout Shift: how much content jumps around while loading. Good is under 0.1.

These are Google's Core Web Vitals, and every tool below checks them for free.

PERF

Google PageSpeed Insights and WebPageTest. Paste in a URL, get real Core Web Vitals scores and a specific list of what's slow.

A11Y

WAVE (by WebAIM) and axe DevTools. Browser extensions that scan a live page for contrast failures, missing alt text, and other accessibility issues.

SEO

Google Search Console. Free, and it's how Google itself tells a site owner what it can and can't find or index.

ALL 4

Lighthouse, built into Chrome DevTools (open DevTools, click the Lighthouse tab). One free report covering performance, accessibility, best practices, and SEO at once. Start here before reaching for anything else.

Scroll effects

The depth illusion

Parallax

Notice how this text sits still while the field behind it holds its position as you scroll? Disabled automatically if you've asked your system to reduce motion.

The Hot Sauce Rule: a little parallax goes a long way. Use it for one hero-scale moment, not every scroll.

Reference

Dev Dictionary

Essential terminology for speaking the language of web design.

Above the fold
Content visible without scrolling.
CTA
Call to Action: the button you want people to click.
Hero
The large banner section at the top of a page.
Viewport
The visible area of a web page in the browser.
Responsive
Design that adapts to different screen sizes.
Breakpoint
Screen width where a layout changes (e.g., 768px).
Grid system
12-column layout framework for alignment.
Z-index
Stacking order of overlapping elements.
Semantic HTML
Using meaningful tags like nav, main, article, instead of generic divs for everything.
Accessibility
Making content usable for people with disabilities.
Mobile-first
Designing for small screens first, then scaling up.
White space
Empty space that gives content room to breathe.
Landmark
A region of a page, like nav, main, or footer, that a screen reader can jump straight to.
Cookie
A small piece of data a site stores in your browser to remember you between visits.
Third-party cookie
A cookie set by a domain other than the one you're visiting, usually for ad tracking.
GDPR
The EU's data privacy law. Requires sites to disclose what personal data they collect and get consent.
Core Web Vitals
Google's three real-world performance metrics: LCP, INP, and CLS.
Lighthouse
A free tool built into Chrome DevTools that audits performance, accessibility, best practices, and SEO at once.
Container query
A CSS rule that responds to the size of its own container, not the size of the browser window.
Neo-brutalism
A design trend using thick borders, hard offset shadows, and bold color instead of subtlety.
Modal
A dialog window that sits on top of the page and blocks interaction with everything behind it until closed.

Keep going

Where to Actually Learn This

This page is a tour, not a course. The full list of free courses, paid courses, professional support, and sources this page draws on lives on its own page, since it's the kind of thing worth adding to over time.

See the full resources list

Interactive lab

Learn by Exploring

Click to open interactive demos and a couple of downloadable resources.

One more thing

What's With the Grid?

Every section on this page secretly lines up to an invisible 12-column grid, the same system behind frameworks like Bootstrap and Tailwind. Press G, or use the button below, to see it.

Learn how CSS Grid actually works →

F-Pattern Reading

The coral shape is a heatmap, not a decoration. Eyes hit the full top line first, then a shorter second pass, then trail down the left edge scanning for anything worth stopping for. Everything outside that shape gets skimmed or skipped.

What to do with this: put your strongest words at the start of the first two lines and down the left edge. Don't bury your point in the middle of a paragraph.

Z-Pattern for Landing Pages

① Logo
② Sign Up
④ Learn More
③ Get Started

On pages with more visuals than text, like most landing pages, eyes don't scan line by line. They jump corner to corner: top-left, across to top-right, diagonally down to bottom-left, then across to bottom-right, tracing a Z.

What to do with this: put your logo top-left, your account/sign-up link top-right, and your main call-to-action bottom-right, right where the Z ends.

The 8pt Grid System

Card Title

16px below the icon, 16px below this line, 16px of padding all around.

Action

Every dot in the grid above is 8px apart. The card's padding, the gap under the icon, and the gap under this paragraph are all exactly 16px, which is 2 dots. Nothing here was placed by eye.

What to do with this: before you type a random padding value, ask whether 8, 16, 24, or 32 already does the job. It almost always does.

Glassmorphism Explained

This card uses glassmorphism

Glassmorphism is that frosted-glass effect you see everywhere now (thanks, Apple). It uses backdrop-filter: blur() to blur whatever is behind an element.

The CSS magic

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

Why it works: transparency + blur creates visual hierarchy without blocking content.

When to use: modals, navigation overlays, tooltips.

Browser support: works in all modern browsers. Safari needs -webkit-backdrop-filter.

Homepage Anatomy Blueprint

01 · The Hero
Transform Your Business in 30 Days

We help ambitious founders scale without burning out.

Primary CTA

Hook visitors in 3 seconds. Answer "what's in it for me?" Your H1 should make them say "yes, that's exactly what I need."

02 · The Problem
Tired of Working 60-Hour Weeks?
No time for family
Burning out fast
Stuck at $10K/mo

Show empathy first. List 3–4 problems your audience faces before pitching solutions.

03 · Your Solution
Our Simple 3-Step Process

① Discovery  →  ② Execution  →  ③ Results

Make it simple. Break your process into 3 steps.

04 · Social Proof
Trusted By 500+ Companies
★★★★★
★★★★★

Trust drives conversion. 2–3 testimonials with real names and photos.

05 · Features
Why 10,000+ Businesses Choose Us
⚡ Fast setup
🔒 Secure
📈 Scalable

Outcomes over features. Focus on results, not specs.

06 · Pricing
Flexible Plans for Every Stage
STARTER
$XX
POPULARPRO
$XX
ENTERPRISE
Custom

Good / better / best. Highlight the middle tier.

07 · Results
Real Results, Real Numbers
+250%Revenue Increase
10xROI

Show, don't tell. Concrete numbers beat vague claims.

08 · Lead Magnet
Download Our Free Growth Guide
Get It Free

Capture emails. Offer value in exchange.

09 · FAQ
Frequently Asked Questions
Do you offer refunds?+
How long is onboarding?+
Can I cancel anytime?+

Kill objections early. Answer the top 5–7 questions.

10 · Final CTA
Ready to Scale Your Business?
Start Now

Last chance to convert. Make it about them.

Homepage Anatomy, by creativepea
Save this blueprint for reference

Top Nav

Logo left, links right. The default for a reason: predictable, always visible.

Hamburger Menu

Collapses everything behind one icon. Saves space, costs a tap. Mostly a mobile pattern now.

Sidebar Nav

Vertical, persistent. Common for dashboards and docs where there are too many sections for a top bar.

Mega Menu

A dropdown that opens into a full grid of links. For sites with deep catalogs: retailers, big docs sites.

Bottom Tab Bar

Icons and short labels, pinned to the bottom. The standard for mobile apps, thumb-reachable.

›
›

Breadcrumbs

A trail, not a menu. Shows where you are in a hierarchy. Pairs with, doesn't replace, primary nav.

Same job, six different shapes.

Hero Sections, Five Ways

Text-Only, Centered

Just a headline, a line of support copy, and a button. Fast to build, fast to load, hard to get wrong.

Split Hero

Copy on one side, a product shot or illustration on the other. Shows and tells at the same time.

Full-Bleed Background

A photo or video fills the whole section, text sits on top with an overlay for contrast. High impact, needs a real image.

Product Screenshot

A short pitch above an actual screenshot of the product. Common for SaaS: it proves the thing is real.

Video Background

Looping, muted, autoplaying footage behind the headline. Heavy to load, needs a reduced-motion fallback.

Pick the one your content can actually support.

Three Ways to Handle the Fold

The One-Screen Pitch

Everything essential (what it is, why it matters, what to click) fits before the dashed line. Nothing below is required reading.

The Teaser Peek

A sliver of the next section is deliberately visible past the fold. It signals "there's more" without a scroll indicator.

↓

The Explicit Scroll Cue

An arrow, chevron, or "scroll to explore" label removes any doubt that there's more content below.

All three work. Silence about it is the only wrong answer.

Content Sections, Five Ways

Card Grid

Equal-weight items in a repeating grid. Features, team members, blog posts: anything that's a list of peers.

Zig-Zag Rows

Image and text alternate sides row to row. Slower to scan than a grid, better for telling a sequence of points.

Tabs

One panel visible at a time behind a row of switches. Keeps a busy page short at the cost of hiding content.

List / Table

Rows of structured data. Pricing comparisons, changelogs, specs: anything better scanned than read.

Carousel

One item centered and emphasized, neighbors peeking at the edges. Good for testimonials, risky for anything important.

The shape should fit the content, not the other way around.

Footers, Four Ways

Minimal

A few links and a copyright line. Right for small sites with nothing else that needs saying.

Mega Footer

A full sitemap in columns. Common on large sites where the footer doubles as secondary navigation and SEO.

Newsletter Footer

An email field and a button, front and center. The footer as one last chance to capture the visitor.

App-Download Footer

Store badges instead of links. For products where the real destination is a mobile app, not more web pages.

Same last impression, different jobs.

Contrast Checker

Real WCAG math, calculated in your browser as you type. No values are sent anywhere.

The quick fox jumps.

Body text at a normal reading size.

21.00 : 1
AA Normal Text AA Large Text AAA Normal Text AAA Large Text

Normal text needs 4.5:1 (AA) or 7:1 (AAA). Large text (18px+, or 14px+ bold) and UI borders need 3:1 (AA) or 4.5:1 (AAA).

Guess the Contrast

Would this pass WCAG AA for normal text (4.5:1)? Guess before you check the math.

Score: 0 / 0

Sample Text

This is what body copy looks like in this pairing.

This Page's Style Guide

Webpage Anatomy Style Guide

Color

coral
#FF6B5B
pink
#FF3D9A
teal
#00BFA5
sun
#FFD23F
ink
#22182B
paper
#FFF9F2

Type Scale

Aa H1 Fredoka
Aa H2 Fredoka
Aa Body Nunito
Aa Mono Space Mono

Spacing (8pt grid)

Z-Index

1 → 10 → 100 → 1000

content → dropdown → sticky nav → modal

webpage-anatomy · generated from this page
Save it, reuse it, remix it.

Box Model Playground

Every element on a page is margin, border, padding, and content, nested like a set of frames. Drag to see it for real.

margin
border
padding
content

margin: 16px; border: 4px; padding: 16px;

Breakpoint Simulator

Drag the slider to resize the frame. Watch the layout inside decide, on its own, when it's too narrow to stay horizontal.

900px · Desktop
No JavaScript is deciding this. CSS container queries are.

Take the Quiz

12 questions pulled straight from this page. Pick an answer to see it graded instantly.

Score: 0 / 12
1. What's the minimum WCAG AA contrast ratio for normal body text?

2. In this page's z-index system, what layer does a modal sit at?

3. What's the max recommended number of items in primary navigation?

4. What does CTA stand for?

5. All the spacing on this page is a multiple of what number?

6. Which native HTML element traps focus and closes on Escape without any custom JS?

7. Which HTML element creates the 'banner' landmark a screen reader can jump straight to?

8. A cookie set by a domain other than the one you're visiting, usually for ad tracking, is called what?

9. Which Core Web Vital measures how fast a page responds to a click or tap?

10. Which free tool, built right into Chrome DevTools, audits performance, accessibility, best practices, and SEO all at once?

11. Which button style trend uses thick borders and hard offset shadows instead of soft ones?

12. A CSS container query responds to the size of what?