DevelopmentBasic

Frontend

The part of an application or website the user sees and interacts with: the visual interface, buttons and forms that run in the browser or device.

Pronunciation

/ˈfrʌnt.ɛnd/
"FRONT-end"
Listen on:Forvo Cambridge

What is it

The frontend (or “client side”) is everything the user can see and interact with directly in an application or website. It’s what runs in the browser (Chrome, Firefox, Safari) or in the user’s mobile app.

If software were a restaurant:

  • The frontend is the dining room, the menu, the waiters, the plate presentation
  • The backend is the kitchen, the ingredients, the recipes

Frontend Technologies

The 3 base web technologies

Technology Function Analogy
HTML Structure and content The skeleton and organs
CSS Style and visual presentation Clothes and makeup
JavaScript Interactivity and logic Muscles and nervous system

Modern frameworks and libraries

Developers rarely write plain JavaScript. They use frameworks that add structure and productivity:

Framework Origin / backing Adopted by
React Created by Meta; since 2026 under the React Foundation (Linux Foundation) Netflix, Instagram, Airbnb
Angular Google Large enterprises, banking apps
Vue.js Created by Evan You; open source community Startups, medium companies
Svelte Open source community Performance-focused projects
Astro Astro team (part of Cloudflare since 2026); still open source Content sites, blogs, marketing

What a Frontend Developer Does

A frontend developer is responsible for:

  • Implementing the visual design delivered by the UX/UI designer
  • Creating reusable components (buttons, forms, modals)
  • Managing state of the application (what data shows and when)
  • Consuming APIs from the backend to display dynamic data
  • Ensuring responsiveness — works on mobile, tablet, and desktop
  • Optimizing performance — load times, smooth animations
  • Ensuring accessibility — works with screen readers, keyboard navigation

Key Frontend Metrics

Core Web Vitals (Google uses these for SEO):

  • LCP (Largest Contentful Paint): main content load speed — “good” at ≤ 2.5 seconds
  • INP (Interaction to Next Paint): interaction response time — “good” at ≤ 200 ms
  • CLS (Cumulative Layout Shift): visual stability, how much the page “jumps” while loading — “good” at ≤ 0.1

Thresholds are assessed at the 75th percentile of real visits.

Modern Frontend: More Complex Than Before

Today’s frontend goes far beyond “making pretty web pages”:

  • SSR/SSG (Server-Side Rendering / Static Generation): deciding what the server renders vs. the client
  • PWA (Progressive Web Apps): web apps that work offline and install like native apps
  • State management: handling real-time changing data (Redux, Zustand, Pinia)
  • Testing: component unit tests, E2E tests with Playwright or Cypress
  • Performance budgets: ensuring the app doesn’t load too much JS

Frontend vs Backend vs Fullstack

Profile What they do When you need them
Frontend The visible interface Redesigns, new screens, web apps
Backend Logic and data APIs, processes, integrations
Fullstack Both Startups, small projects, prototyping

Why It Matters for Your Business

A well-built frontend directly impacts business outcomes:

  • Conversion: faster, easier-to-use pages tend to convert better
  • Retention: users readily abandon apps with poor UX
  • SEO: Core Web Vitals is part of the page experience signals Google considers in ranking
  • Brand: the frontend is your product’s face — it reflects your company’s quality
  • Backend - The frontend’s complement: logic, data, and server
  • API - The communication channel between frontend and backend
  • REST - The most common API style the frontend uses to request data from the backend
  • Fullstack - Developer who handles both frontend and backend

Additional Resources:

  • MDN Web Docs - The most comprehensive web technology reference
  • web.dev - Google’s guides for performance and Core Web Vitals

Related articles

All terms