Get a Free Consultation

Website Design & Development Glossary

Web design shapes how a website looks and feels, and web development builds how it works. This glossary explains more than 135 web design and development terms from A to Z in plain language, each tagged Beginner, Intermediate or Advanced, from HTML and CSS to CMS platforms, APIs and Core Web Vitals.

Updated Design, development and CMS covered Free to use, no sign-up

Web design and development terms from A to Z

ATerms starting with A

Above the Fold
The part of a webpage visible without scrolling. Key messaging, calls to action and navigation are usually prioritized here.
Accessibility (Web Accessibility)
Designing and building websites so people with disabilities can perceive, navigate and interact with them, usually guided by WCAG standards.
Agile Development
An iterative approach to managing projects that breaks development into short cycles, called sprints, with continuous feedback and adjustment.
Animation (CSS and Web Animation)
Motion applied to interface elements to guide attention, give feedback or add polish, without harming performance.
API (Application Programming Interface)
A defined way for a website or app to exchange data with another system, such as payment processing or a CRM.
ARIA
Accessible Rich Internet Applications: HTML attributes that tell screen readers and other assistive technology about an element’s role, state and properties when plain HTML cannot.
Atomic Design
A method for building design systems by breaking interfaces into small, reusable pieces: atoms, molecules and organisms.

BTerms starting with B

Backend Development
The server-side part of a website, which handles databases, application logic and server setup, all invisible to the visitor.
Bootstrap
A popular open-source CSS framework with pre-built components and a responsive grid, used to build sites faster.
Breakpoint
A defined screen width at which a responsive layout changes to fit the device better.
Browser Compatibility
Making sure a website displays and works correctly across browsers such as Chrome, Safari, Firefox and Edge.
Build Process
The automated steps, such as bundling, minifying and compiling, that turn source code into optimized files ready for production.
Button States
The different looks of a button, such as default, hover, active and disabled, which give feedback during interaction.

CTerms starting with C

Caching
Temporarily storing copies of files or data so later requests are served faster. It is a key speed optimization.
Call to Action (CTA)
A prompt, usually a button or link, that encourages a visitor to take a specific next step, such as “Get a Quote.”
CDN (Content Delivery Network)
A distributed network of servers that delivers website content from a location closer to the visitor, reducing load times.
CI/CD
Continuous integration and continuous delivery: automated pipelines that test every code change and deploy it safely, so releases are fast and low-risk.
Client-Side Rendering (CSR)
Building a page’s content in the visitor’s browser with JavaScript, rather than receiving finished HTML from the server.
CMS (Content Management System)
Software such as WordPress or Shopify that lets non-developers create, edit and manage website content without writing code.
Component Library
A collection of reusable, pre-styled interface elements, such as buttons, cards and forms, used to build a site quickly and consistently.
Container Queries
A CSS feature that styles an element based on the size of its container rather than the whole screen, so components adapt wherever they are placed.
Core Web Vitals
Google’s metrics for real-world page experience: Largest Contentful Paint for loading, Interaction to Next Paint for responsiveness and Cumulative Layout Shift for visual stability.
Cross-Browser Testing
Checking that a website works correctly across multiple browsers and versions before launch.
CSS (Cascading Style Sheets)
The language that controls a webpage’s visual presentation, including layout, color, fonts and spacing.
CSS Custom Properties
Reusable values, also called CSS variables, that you define once, such as a brand color, and use throughout a stylesheet. They make themes and dark mode easier.
Custom Post Type
A WordPress feature for content types beyond standard posts and pages, such as Products or Case Studies.

DTerms starting with D

Dark Mode
A color scheme with light text on dark backgrounds, offered as an alternative to a site’s default light theme.
Database
An organized system for storing and retrieving a website’s data, such as content, user accounts and orders.
Deployment
Publishing a website or application update from a development environment to the live, public server.
Design System
A comprehensive set of design standards, components and guidelines that keep a product visually and functionally consistent.
DNS (Domain Name System)
The system that translates a domain name into the IP address of the server hosting a website.
Domain Name
The web address, such as searchsavvy.in, used to reach a website. It is registered separately from hosting.
Dynamic Content
Website content that changes with user behavior, data or context, rather than being fixed for every visitor.

ETerms starting with E

E-Commerce
A website built to sell products or services online, usually with a catalog, cart and checkout flow.
Elementor
A popular drag-and-drop page builder plugin for WordPress, used to design pages visually without writing code.
Encryption
Scrambling data so only an authorized party can read it. It is the foundation of secure HTTPS connections.
Error Page (404 Page)
A custom page shown when a visitor requests a URL that does not exist, ideally helping them find their way back.
Exit-Intent Popup
A popup triggered when a visitor’s cursor movement suggests they are about to leave, often used for last-chance offers.

FTerms starting with F

Favicon
The small icon that represents a website in browser tabs, bookmarks and search results.
Figma
A widely used collaborative design tool for creating website mockups, wireframes and interactive prototypes.
Flexbox
A CSS layout model that makes it easier to align and distribute elements in a container, especially in one dimension.
Font Pairing
Combining two or more typefaces, usually one for headings and one for body text, that work well together.
Form Validation
Checking that data entered into a form, such as an email address, meets the expected rules before it is submitted.
Framework
A pre-built structure of code and tools, such as React or Bootstrap, that gives a foundation for building websites faster.
Frontend Development
The part of web development focused on everything a visitor sees and interacts with directly in the browser.
Full-Stack Developer
A developer skilled in both frontend (what visitors see) and backend (the server side) development.

GTerms starting with G

Git
A version control system that tracks changes to code over time, so developers can collaborate and roll back changes safely.
Gradient
A gradual blend between two or more colors, commonly used in backgrounds, buttons and overlays.
Grid System (CSS Grid)
A layout method that arranges content into rows and columns, giving precise control over two-dimensional page structure.
Gutenberg
WordPress’s block editor, which builds pages from modular content blocks.

HTerms starting with H

Hamburger Menu
The three-line icon that expands into a navigation menu, common on mobile and minimalist designs.
Headless CMS
A content management system that stores and manages content separately from how it is displayed, delivering it to any frontend through an API.
Hero Section
The large, prominent section at the top of a webpage, usually holding a headline, an image and the primary call to action.
Hosting (Web Hosting)
The service that stores a website’s files on a server and makes them accessible on the internet.
Hover State
The visual change applied to an element when a cursor rests over it, signaling that it is interactive.
HTML (HyperText Markup Language)
The standard markup language that structures content on the web, forming the skeleton of every webpage.
HTTPS
The secure version of HTTP, which encrypts data between a browser and a server. It is needed for the padlock icon and for user trust.

ITerms starting with I

Image Compression
Reducing an image’s file size while keeping acceptable visual quality. It is a key website speed optimization.
Image Formats (WebP and AVIF)
Modern image formats that give much smaller files than JPEG or PNG at similar quality, helping pages load faster.
Information Architecture (IA)
Organizing and structuring a website’s content so users can find what they need intuitively.
Interaction Design (IxD)
The design discipline focused on how users interact with an interface’s controls, feedback and behaviors.
Interface (UI)
See UI (User Interface).

JTerms starting with J

JAMstack
A modern web architecture, built on JavaScript, APIs and Markup, that pre-builds pages for speed and security instead of generating them on every request.
JavaScript
The programming language that makes webpages interactive, from animations to dynamic content updates.
jQuery
A JavaScript library that simplifies tasks like DOM manipulation and animation. It is still common in older sites, though new projects now use it less.
JSON
A lightweight, text-based data format used to exchange information between a website’s frontend and backend or between APIs.

KTerms starting with K

Kerning
Adjusting the space between individual pairs of letters in typography, to improve readability and visual balance.
Keyframe Animation
A CSS animation technique that defines specific styles at different points, called keyframes, during an animation.

LTerms starting with L

Landing Page
A standalone page designed for a specific campaign or offer, built to drive one focused conversion action.
Lazy Loading
A performance technique that delays loading images or content until they are about to enter the viewport, improving initial page speed.
Lighthouse
A free Google tool that audits a website’s performance, accessibility and best practices and produces a scored report.
Load Time
How long a webpage takes to fully display its content after a visitor requests it.
Logo Design
Creating a brand’s main visual identifier, which anchors a website’s overall visual identity.

MTerms starting with M

Markup Language
A system, such as HTML, that uses tags to define the structure and elements of a document. It is not a programming language.
Media Query
A CSS rule that applies styles only when certain conditions, such as screen width, are met. It is the core mechanism of responsive design.
Meta Tags
HTML tags in a page’s head that provide metadata, such as the page title, description and social sharing image. Build yours with our Meta Tag Generator.
Microinteraction
A small, single-purpose animation or feedback moment, such as a button pulse on click, that makes an interface feel responsive.
Mobile-First Design
Designing for the smallest screen first, then progressively enhancing the layout for larger screens.
Mockup
A static, high-fidelity picture of a webpage’s design, used to review look and feel before development begins.
Module (Content Block)
A reusable, self-contained section of content or functionality that can be placed and rearranged across pages.

NTerms starting with N

Navigation Bar (Navbar)
The menu, usually at the top of a page, that lets visitors move between a website’s main sections.
No-Code and Low-Code
Website-building approaches, such as Webflow or Elementor, that let people build working sites with little or no hand-written code.
Node.js
A JavaScript runtime that lets JavaScript run on a server, commonly used to build the backend of modern web applications.

OTerms starting with O

Onboarding Flow
The guided sequence of steps that introduces a new user to a website or app’s key features and value.
Open Source
Software, such as WordPress, whose source code is publicly available for anyone to inspect, modify and contribute to.
Optimization (Performance Optimization)
The ongoing work of improving a website’s speed, efficiency and resource use.
Overlay
A layer of content, such as a popup or modal, shown on top of a page’s main content.

PTerms starting with P

Page Builder
A visual, drag-and-drop tool, such as Elementor or Divi, that lets users design webpages without writing code.
Parallax Scrolling
A design effect where background and foreground elements move at different speeds as a user scrolls, creating a sense of depth.
Persona (User Persona)
A fictional profile of a key user segment, used to guide design and content decisions around real user needs.
PHP
A server-side scripting language that powers much of the web, including WordPress and many other content management systems.
Plugin
An add-on that extends a CMS’s core functionality, such as adding a contact form, SEO tools or an online store.
Progressive Web App (PWA)
A website built to behave like a native app, with offline access, push notifications and fast performance.
Prototype
An interactive, clickable model of a website used to test flows and gather feedback before full development begins.

QTerms starting with Q

QA (Quality Assurance) Testing
Systematically testing a website across devices, browsers and use cases to catch bugs before launch.
Query String
The part of a URL after a “?” that passes extra parameters, such as tracking codes or filter settings.

RTerms starting with R

React
A popular JavaScript library for building interactive user interfaces from reusable components.
Repository (Repo)
A storage location, usually managed with Git, that holds a website or application’s complete codebase and its history.
Responsive Design
A design approach that makes a website adapt its layout automatically to look and work well on any screen size.
Responsive Images
Serving different image sizes to different screens, using attributes such as srcset, so phones do not download images made for large desktop displays.
REST API
A common style of building APIs that lets systems communicate over standard web protocols.
Rollback
Reverting a website or application to a previous version, usually after a problematic update or deployment.

STerms starting with S

Sass / SCSS
A CSS preprocessor that adds features such as variables and nesting, making stylesheets easier to maintain in larger projects.
Semantic HTML
Using HTML elements that describe their meaning, such as header, nav, main and article, rather than generic div tags. It helps accessibility and SEO.
Server-Side Rendering (SSR)
Generating a page’s full HTML on the server before sending it to the browser, often improving speed and SEO compared with client-side rendering.
Shopify
A hosted e-commerce platform that lets businesses build and manage an online store without running their own server infrastructure.
Site Architecture
The overall structure and hierarchy of a website’s pages, which shapes both navigation and SEO.
Skeleton Screen
A loading placeholder that mimics a page’s layout before content finishes loading, reducing perceived wait time.
SSL Certificate
A digital certificate that enables HTTPS encryption between a browser and a server. It is needed for secure, trustworthy websites.
Staging Environment
A private copy of a website where changes are tested before they go live, so mistakes never reach real visitors.
Static Site Generator
A tool that builds a website into plain HTML files ahead of time, which makes pages very fast and secure. Examples include Hugo and Eleventy.
Sticky Navigation
A navigation bar that stays fixed at the top of the screen as a user scrolls down the page.
Style Guide
A reference document that defines a site’s colors, typography, spacing and components, to keep the design consistent.
SVG (Scalable Vector Graphics)
An image format built from mathematical paths instead of pixels, so it stays sharp at any size. It is ideal for icons and logos.

TTerms starting with T

Tailwind CSS
A utility-first CSS framework that builds designs by combining small, single-purpose classes directly in the markup.
Template
A pre-designed page or site structure that can be customized with a business’s own content and branding.
Theme (WordPress Theme)
A set of files that controls a WordPress site’s overall design, layout and styling.
Third-Party Integration
Connecting a website to an external service or tool, such as a CRM, payment gateway or email platform.
TLS (Transport Layer Security)
The modern encryption protocol behind HTTPS. It replaced the older SSL protocol, although the name SSL is still used informally.
Typography
The art and technique of arranging type, including font choice, size, spacing and hierarchy, so text is readable and visually effective.
TypeScript
A version of JavaScript that adds types, so many mistakes are caught while writing code rather than after launch. It is widely used on larger projects.

UTerms starting with U

UI (User Interface)
The visual elements, such as buttons, menus and layout, through which a user interacts with a website.
Usability Testing
Watching real users attempt tasks on a website to find friction points and areas for improvement.
UX (User Experience)
How a person feels when using a website, including usability, accessibility, findability and overall satisfaction.
UX Writing
Crafting the words used inside an interface, such as button labels and error messages, to guide users clearly.

VTerms starting with V

Version Control
A system, most commonly Git, for tracking and managing changes to code over time. It is essential for team development.
Viewport
The visible area of a webpage on a user’s screen, whose size responsive design adapts to.
Visual Hierarchy
The deliberate arrangement of design elements, using size, color and spacing, to guide a viewer’s attention in order of importance.
Vue.js
A progressive JavaScript framework for building user interfaces and single-page applications.

WTerms starting with W

WCAG (Web Content Accessibility Guidelines)
The internationally recognized standard for making web content accessible to people with disabilities.
Web Components
Reusable custom HTML elements built with browser-native features, which work across frameworks without extra libraries.
Webflow
A visual website builder that generates clean code. It is popular for design-focused sites that do not need a traditional developer handoff.
Webhook
An automated message that one system sends to another when a specific event happens, such as a new form submission.
Wireframe
A simplified, low-fidelity layout sketch of a webpage that focuses on structure and content placement rather than visual design.
WordPress
The world’s most widely used content management system, which powers a large share of websites on the internet.
WYSIWYG Editor
“What You See Is What You Get”: a visual editor that shows content as it will appear on the live page while you edit.

XTerms starting with X

XML
A markup language for structuring and transporting data. It underlies formats such as XML sitemaps and RSS feeds.
XSS (Cross-Site Scripting)
A security vulnerability where malicious scripts are injected into a website. It is a key risk developers must guard against.

YTerms starting with Y

YAML
A human-readable data format commonly used for configuration files in modern web development and deployment tools.

ZTerms starting with Z

Z-Index
A CSS property that controls the stacking order of overlapping elements, deciding which one appears in front.

What is web design and development, and how do you use this glossary?

Web design decides how a website looks and feels: layout, color, typography and user experience. Web development builds how it works, using code for the pages visitors see (frontend) and the servers and databases behind them (backend). Good sites need both working together.

Start with the Beginner terms, such as HTML, CSS, CMS, hosting, responsive design and wireframe. Move to Intermediate terms as you plan and manage a site, and use the Advanced terms for architecture, performance and security.

Search by term or filter by level above. Related terms link to each other, so you can follow an idea from one concept to the next.

The building blocks of a website

  • HTMLStructure and content of each page
  • CSSLayout, color and typography
  • JavaScriptInteractivity and dynamic behavior
  • BackendServer logic, APIs and security
  • DatabaseStored content, users and orders

Which website platform fits which need?

The right platform depends on your goals, budget and team. Here is how the most common options compare.

A starting guide only. Features and pricing change, so check each platform before you decide.
PlatformBest forTrade-off
WordPressContent-led sites, blogs and flexible business sitesNeeds updates, good hosting and careful plugin choices
ShopifyOnline stores that want fast setupLess flexible outside e-commerce, with app and transaction costs
WebflowDesign-led marketing sites with visual controlSmaller ecosystem, and a learning curve for complex logic
Custom code (React, Next.js)Web apps and highly tailored experiencesHigher build and maintenance cost
Headless CMSContent delivered to several sites or appsNeeds developers to build and maintain the frontend

Web design and development questions, answered

Quick answers to the most searched web design and development basics.

What is the difference between web design and web development?

Web design is about how a website looks and feels: layout, color, typography and user experience. Web development is about how it works, using code to build the pages, features and servers behind it. Designers plan the experience and developers build it.

What is the difference between frontend and backend development?

Frontend development builds what visitors see and use in the browser, using HTML, CSS and JavaScript. Backend development builds what happens on the server, such as databases, logins, payments and APIs. A full-stack developer works on both.

What is responsive design?

Responsive design makes a website adapt its layout automatically to any screen size, from phones to large desktops. It uses flexible grids, images that scale and media queries, so one site works well on every device.

What is a CMS, and which should I choose?

A CMS, or content management system, lets people edit a website without writing code. WordPress suits content-led sites, Shopify suits online stores, and Webflow suits design-led sites. Choose based on what you need to publish and who will manage it.

What are HTTPS and an SSL certificate?

HTTPS is the secure version of HTTP. It encrypts the data between a visitor’s browser and your server, and it needs an SSL or TLS certificate. Browsers warn visitors about sites without it, and it is a lightweight ranking signal for Google.

What are Core Web Vitals?

Core Web Vitals are Google’s measures of page experience: Largest Contentful Paint for loading speed, Interaction to Next Paint for responsiveness, and Cumulative Layout Shift for visual stability. Passing them gives visitors a faster, smoother site.

Why does web accessibility matter?

Accessibility lets people with disabilities use your site, and it improves usability for everyone. Following WCAG, with good contrast, keyboard access and meaningful alt text, also supports SEO and reduces legal risk in many countries.

What is a headless CMS?

A headless CMS stores and manages content but does not decide how it is displayed. It delivers content through an API, so the same content can power a website, an app and more. It offers flexibility but needs developers to build the frontend.

What is a wireframe, and why use one?

A wireframe is a simple, low-detail sketch of a page that shows structure and content placement. Teams use wireframes to agree on layout and flow before spending time on visual design or code, which saves rework later.

Is this web design and development glossary free?

Yes. It is completely free to read, with no sign-up. You can search it, filter it by level and jump to any letter.

Explore our other glossaries

Looking for SEO, PPC or social media terms? Each has its own dedicated glossary.

Browse all glossariesThe full hub of 12 glossaries and 1,000+ terms. SEO GlossarySEO terms from on-page to technical SEO. Social Media GlossaryInstagram, TikTok and paid social terms. PPC and Google AdsBidding, targeting and campaign terms. Performance MarketingAttribution, growth and cross-channel terms. Content MarketingEditorial, writing and content strategy terms. AEO and GEO (AI Search)AI search, LLM and generative engine terms. Email MarketingDeliverability, automation and campaign terms. Analytics and ReportingGA4, statistics and dashboarding terms. E-Commerce MarketingCheckout, fulfillment and retention terms. Branding and IdentityBrand strategy, visual identity and positioning. Marketing AutomationWorkflow, CRM integration and orchestration.

Put the terms to work: take the Website Development & Design Quiz, build your meta tags and robots.txt, or play Find the Marketing Words.

Did not find the term you were looking for?

Get in touch and we will add it, or walk you through what it means for your business.

Talk to our teamSee our services
5 ★★★★★ 9 Google reviews