You've had a call with a web developer and they mentioned "the hero," "the CTA," and "above the fold" — and you nodded along while having no idea what any of it meant. You're not alone. This guide is a plain-English breakdown of every major part of a website so you can walk into any web project with confidence.
The Header
The header is the strip at the very top of every page on your site. It almost always contains your logo on the left and navigation links on the right — Home, About, Services, Contact, that kind of thing. It's usually "sticky," meaning it stays at the top of the screen as you scroll down.
Think of it like the cover of a book. It tells visitors who you are and gives them the tools to go anywhere on your site instantly.
The Navigation (or "Nav")
The navigation is the list of links — usually inside the header — that lets visitors move between pages. On mobile, this often collapses into a "hamburger menu" (those three stacked lines you tap to open a menu). A well-structured nav is one of the most important things on your site because if people can't find what they're looking for in seconds, they leave.
The Hero Section
This is the big, full-width area at the top of a page — usually with a bold headline, a short subheading, and a button. Developers call it the "hero" because it's the most prominent, most important section of the page. It's the first thing a visitor sees and it has one job: make them want to keep reading.
A strong hero answers three questions immediately:
- What do you do? ("Custom websites for small businesses.")
- Who is it for? ("Built for Northern Virginia entrepreneurs.")
- What should I do next? ("Get a Free Estimate →")
The background of a hero is usually a photo, a gradient, or a video. The button inside it is called a Call to Action (more on that below).
Above the Fold
"Above the fold" is an old newspaper term — it refers to whatever you can see on the front page without unfolding the paper. On a website, it means everything visible on screen when a page first loads, before you scroll. Your hero section is above the fold. Anything you have to scroll to see is "below the fold."
Why it matters: most visitors decide in under 5 seconds whether to stay or leave. Everything above the fold needs to be crystal clear.
The Call to Action (CTA)
A CTA is any button or link that asks the visitor to do something specific. "Get a Free Quote," "Book a Call," "Shop Now," "Learn More" — all CTAs. The best ones are specific, action-oriented, and placed where the visitor already has enough context to click.
A common mistake is having too many CTAs competing with each other on the same section. Pick one primary action per section and make it obvious.
Sections
Below the hero, a page is broken up into sections — distinct chunks of content that each serve a single purpose. A typical homepage might have:
- A services overview section
- A "why us" / value proposition section
- A testimonials section
- A locations or service area section
- A final CTA section
Each section has its own heading, its own content, and often alternates background colors (light/dark) to visually separate them as you scroll.
Cards
Cards are self-contained boxes of content — usually with a title, a short description, and sometimes an icon or image. You'll see them used for services, blog posts, team members, or features. They're grouped in a grid (rows and columns) and make it easy to scan information quickly.
The Sidebar
A sidebar is a narrower column that runs alongside the main content — most common on blog pages. It might contain a search bar, related articles, categories, or a small CTA. Modern web design uses sidebars sparingly because they can clutter the layout on mobile. Many sites have dropped them entirely in favor of focused, single-column articles.
The Footer
The footer is the section at the very bottom of every page. It typically contains:
- Your logo and a short tagline
- Repeated navigation links (so visitors don't have to scroll back up)
- Contact info or social media links
- Legal links — Privacy Policy, Terms of Service
- A copyright line
The footer is often overlooked but it's prime SEO real estate. Search engines crawl it on every single page, so having keyword-rich, descriptive links there helps your rankings.
Whitespace
Whitespace (also called negative space) is the empty space between elements. It's not wasted space — it's intentional breathing room that makes content easier to read and design feel more premium. Amateur-looking websites cram too much in. Professional ones let things breathe.
The Grid
Most modern websites are built on an invisible grid — a system of columns and gutters that keeps everything aligned and balanced. You'll hear developers refer to things like "a 3-column grid" or "12-column layout." It's just a framework for organizing content consistently across the page.
Responsive Design
A responsive website automatically adjusts its layout based on screen size. On a desktop, you might see three columns side by side. On a tablet, that collapses to two. On a phone, it's one column. Responsive design isn't optional anymore — over 60% of web traffic is mobile, and Google penalizes sites that aren't mobile-friendly in search rankings.
Breakpoints
Breakpoints are the specific screen widths where the layout changes. "At 768px wide, switch from 3 columns to 1 column." Developers set these in the CSS (the code that controls how things look). Common breakpoints are desktop (1200px+), tablet (768–1199px), and mobile (under 768px).
The CTA Banner
Separate from a section-level CTA, a CTA banner is a full-width strip — usually near the bottom of a page — with one bold ask. "Ready to start your project? Let's talk." It's a last chance to convert a visitor who read the whole page but hasn't acted yet. Done right, it converts extremely well.
A Quick Glossary
- Hero — The big top section of a page with headline + CTA
- Header — The top bar with logo and navigation
- Footer — The bottom bar with links and legal info
- Nav / Navigation — The menu linking to pages
- CTA — Call to Action; a button asking visitors to do something
- Above the fold — What's visible before scrolling
- Section — A full-width content block on a page
- Card — A contained box of content in a grid
- Sidebar — A secondary column beside main content
- Whitespace — Intentional empty space between elements
- Grid — The column system that organizes layout
- Responsive — Adapts layout to any screen size
- Breakpoint — A screen width where the layout changes
You Now Speak Web
Understanding these terms won't make you a developer, but it will make you a much better client. When you can say "I want a stronger hero headline" or "the CTA on mobile isn't obvious enough," you save everyone time and get a better result faster. That's the whole point.
If you're a small business in Northern Virginia looking to build or improve your website, get a free estimate — no jargon, no pressure, just a straight conversation about what you need.