Glossary · Web Development

Front End (Front-End Development)

Front end is everything in a website that runs in the visitor's browser: the HTML structure, CSS styling and JavaScript behavior users see and click.

Updated October 6, 2026

Front end (or front-end development) is the part of a website or web app that runs in the user's browser, built from HTML for structure, CSS for presentation and JavaScript for behavior. It is what visitors see and interact with.

Why it matters

The front end determines how fast a page feels, whether it works on a phone, and whether people with assistive technology can use it. Even if your servers are perfectly healthy, a heavy or broken front end makes a site feel down: a JavaScript error can leave a blank page while the server still returns HTTP 200.

Front-end work also covers performance, accessibility, responsive layout and browser compatibility, not just visual design.

Example

A product page is delivered as three kinds of files:

<link rel="stylesheet" href="/app.css">
<h1 id="title">Blue Kettle</h1>
<script src="/app.js" defer></script>

The HTML declares the heading, the CSS styles it, and the script can change it after the page loads.

Common mistakes

  • Judging a site only by the HTTP status code. A 200 response with a broken script is still a broken page for users.
  • Shipping large unoptimized JavaScript bundles and testing only on a fast desktop connection.
  • Treating the front end as purely visual and ignoring accessibility and performance.

Get notified when this term updates

Plus occasional practical tips on uptime and monitoring, nothing else. Unsubscribe anytime.

Keep reading

Glossary · Web DevelopmentCritical CSSCritical CSS is the minimal set of styles needed to render the visible part of a page, inlined in the HTML so content appears without waiting for stylesheets.Glossary · Web DevelopmentCSS AnimationCSS animation uses @keyframes and the animation properties to change styles over time without JavaScript, from simple fades to looping motion.Glossary · Web DevelopmentHydrationHydration is the step where client-side JavaScript attaches event handlers and state to HTML that the server already rendered, making the page interactive.Guide · PerformanceCore Web Vitals Guide: Improve LCP, INP and CLS Step by StepLearn what LCP, INP and CLS measure, how lab and field data differ, and the practical fixes for images, fonts, JavaScript and layout shifts.9 min readGuide · PerformanceHow to Check Your Website Speed for Free (and What to Fix First)Test your website speed with free tools, understand the numbers in plain language, and fix the biggest problems first: images, hosting, scripts and caching.7 min readGuide · PerformanceImage Optimization Guide: WebP, AVIF, Sizing, srcset, Lazy LoadingChoose between JPEG, PNG, WebP and AVIF, size images correctly, use srcset and lazy loading, and batch convert with cwebp, avifenc and sharp.6 min read

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.