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 | Company | Adopted by |
|---|---|---|
| React | Meta (Facebook) | Netflix, Instagram, Airbnb |
| Angular | Enterprise companies, banking apps | |
| Vue.js | Open source community | Startups, medium companies |
| Svelte | Community | Performance-focused projects |
| Astro | Community | 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 — must be < 2.5 seconds
- INP (Interaction to Next Paint): interaction response time — must be < 200ms
- CLS (Cumulative Layout Shift): visual stability — how much the page “jumps” while loading
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: a landing page 1 second faster can increase conversions by up to 7%
- Retention: users abandon apps with poor UX — 88% don’t return after a bad experience
- SEO: Google penalizes slow pages with low Core Web Vitals scores
- Brand: the frontend is your product’s face — it reflects your company’s quality
Related Terms
- [[Backend]] - The frontend’s complement: logic, data, and server
- [[API]] - The communication channel between frontend and backend
- [[REST]] - The protocol 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