Keep going

Resources

Webpage Anatomy is a tour, not a course. This is the running list of where to actually go next: free, paid, or a real person if a course isn't what you need. It'll grow over time.

Learn it yourself

Courses & References

Free

  • MDN Web Docs, the authoritative technical reference for HTML, CSS, and JS
  • W3Schools, beginner-friendly tutorials with a live editor for every example
  • freeCodeCamp, full interactive course paths with real certifications
  • web.dev, Google's own guides on performance and accessibility
  • CSS-Tricks, deep, practical articles on specific CSS techniques

Paid

  • Frontend Masters, in-depth video courses taught by working industry engineers
  • Codecademy Pro, structured interactive courses with guided projects
  • Udemy, one-time-purchase courses on almost any specific topic
  • LinkedIn Learning, broad course library, often bundled with a Premium plan
  • Coursera, university-backed courses and certificates

This list grows over time. W3Schools was the first one added; more will follow.

When you need more than a course

Professional Support

Sometimes the fastest way forward is working with someone directly instead of learning it all yourself first.

* marks an affiliate link, small commission at no extra cost to you. Everything else is just a recommendation.

DBA University *

The Brief Collective's DBA University, a 12-week coaching program for brand designers on repositioning for high-ticket clients, building $5K–$10K offer suites, and the sales systems to actually book them. Live group calls plus an academy portal of templates and scripts. I'm a graduate of this program myself.

Visit DBA University

Social Butterfly Club *

The Brief Collective's Social Butterfly Club, a design-marketing community on Skool. Free to join for community access, content critiques, and a pricing guide. The $29/month Premium tier adds a 30-day client-getting content playbook, bi-weekly coaching and content audits, and the full attraction-marketing course.

See plans

DevNinja

White-label development support: custom software architecture and specialized technical builds for agencies and designers who need a developer without hiring one full-time. The technical-side sister business to Creativepea: same people, different half of the work.

Visit DevNinja

Creativepea

End-to-end web design, performance optimization, and content strategy for local businesses, creators, and growing companies. Client-facing digital experiences built to drive conversions, search rankings, and brand presence, the design-side sister business to DevNinja: same people, different half of the work.

Visit Creativepea

Say thanks

Support This Project

Webpage Anatomy is free and stays that way. If it was useful, a coffee goes a long way.

Buy Me a Coffee

If Webpage Anatomy saved you some time or taught you something, a coffee is always appreciated.

Support on Ko-fi

Fact-checked, not just written

Sources & Further Reading

RESEARCH

The F-pattern and Z-pattern reading patterns come from eye-tracking research by the Nielsen Norman Group.

STANDARDS

Contrast and accessibility figures come from the W3C's Web Content Accessibility Guidelines (WCAG). Core Web Vitals and Lighthouse are Google's.

LAW

Privacy law references are to the EU's GDPR and California's CCPA, current as of this writing, not legal advice.

TRENDS

The button style history drew on design-trend writeups from onething.design and cccreative.design.

← Back to Webpage Anatomy

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?