# What Is a Frontend? Meaning, Technologies, and Examples

> A frontend is the part of an app users see and use. Learn HTML, CSS, JavaScript, how it renders in the browser, frameworks, and what frontend developers do.

**URL:** https://www.ciptadusa.com/blog/frontend-adalah  
**Type:** blog  
**Author:** PT Cipta Dua Saudara  
**Category:** Engineering  
**Published:** 2026-10-26  
**Cover:** https://www.ciptadusa.com/media/uploads/blog/2026-10/1792981264338-frontend-adalah-20261026.webp  

## Article

A frontend is the part of an app or website that users see and use directly: the page layout, menus, buttons, forms, images, and the response when a button is pressed. AWS describes it as the part your users see, including visual elements such as buttons, checkboxes, graphics, and text messages, which lets users interact with the application ([source](https://aws.amazon.com/compare/the-difference-between-frontend-and-backend/)).

A simple example: when you open a product page in an online store, the frontend lays out the photos, price, variant options, and the "Add to Cart" button. When that button is pressed, the frontend sends a request to the backend, waits for the answer, and then updates the cart icon on screen. This article covers what a frontend is, its core technologies, how it works in the browser, rendering options, frameworks, the qualities to protect (performance, responsiveness, accessibility, security), the frontend developer role, and how a business can assess the frontend of a project.

## What Is a Frontend?

The frontend is also called the client side, because its code runs on the user's device, inside a browser or a mobile app. AWS explains that the term frontend refers to the graphical user interface (GUI) users interact with directly, such as navigation menus, design elements, buttons, images, and graphs. In technical terms, the page or screen a user sees with its UI components is called the Document Object Model, or DOM ([source](https://aws.amazon.com/compare/the-difference-between-frontend-and-backend/)).

MDN, Mozilla's web documentation, describes the client and server relationship this way: servers store web pages, sites, or apps. When a client wants to access a page, a copy of the page code is downloaded from the server to the client machine, where it is rendered by the browser and displayed to the user ([source](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works)). The code that is downloaded and rendered on the user's device is frontend territory.

### Which Part of a Website Is the Frontend?

On a website, the frontend is everything visitors can see and touch: the header and menu, page content, contact form, sliders, pricing tables, footer, and even the error message when a form is incomplete. The parts working behind it, such as the database, business rules, and permission checks, belong to the backend. The server side is covered in full in [What Is a Backend?](/en/blog/backend-adalah).

### Frontend vs UI/UX

UI/UX is design work: user research, flows, wireframes, prototypes, and visual design. Frontend is engineering work that turns that design into code running in a browser or app. The designer decides which button exists and where it sits; the frontend developer makes that button actually clickable, sends the data, and shows the result. The design side is explained in [What Is UI/UX?](/en/blog/ui-ux-adalah).

## The Three Core Frontend Technologies: HTML, CSS, and JavaScript

MDN calls HTML, CSS, and JavaScript the three layers of standard web technologies, each building on the one before ([source](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript)):

| Technology | Role | Examples on a page |
| --- | --- | --- |
| HTML | Markup language that structures content and gives it meaning | Headings, paragraphs, data tables, images, video, buttons |
| CSS | Language of style rules for presentation | Background colors, fonts, multi-column layouts |
| JavaScript | Scripting language for dynamic behavior | Updating content, interactive maps, animation, form validation |

The table is summarized from MDN ([source](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript)). MDN uses a button as its example: HTML gives it structure and purpose, CSS makes it look good, and JavaScript adds behavior when it is clicked.

AWS adds that JavaScript works by manipulating the DOM. That means the frontend can handle basic interactions on its own, such as showing a calendar or checking whether an email address is valid, and passes more complex requests to the backend ([source](https://aws.amazon.com/compare/the-difference-between-frontend-and-backend/)).

## How a Frontend Works in the Browser

MDN describes the sequence of steps a browser goes through to turn HTML, CSS, and JavaScript into pixels on screen, called the critical rendering path ([source](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Critical_rendering_path)):

1. The browser sends an HTTP request, and the server responds with an HTML document.
2. The browser parses the HTML into a DOM tree. Each time it finds a link to a stylesheet, script, or image, it requests that file.
3. From the CSS, the browser builds the CSS Object Model (CSSOM).
4. The DOM and CSSOM are combined into a render tree containing the styles for all visible content.
5. The layout step calculates the size and position of every element.
6. The page is painted to the screen.

Once the page is shown, JavaScript can change the DOM in response to user actions. MDN defines the DOM as an API that represents an HTML document as a tree of nodes; nodes can be created, moved, and changed, and event listeners can be attached that fire when an event occurs ([source](https://developer.mozilla.org/en-US/docs/Glossary/DOM)).

An illustrative flow in an internal order app (an example to explain the concept, not real project data):

1. A warehouse admin opens the "Today's Orders" page. The frontend shows a table skeleton and a loading indicator.
2. The frontend requests the order list from the backend API and fills the table with the results.
3. The admin types a customer name in the search box. The frontend filters the table rows right in the browser without reloading the page.
4. The admin presses "Mark as Shipped". The frontend disables the button so it cannot be pressed twice, sends the request to the backend, and changes the row status to "Shipped" once the backend confirms.
5. If the connection fails, the frontend shows a clear message and a retry button.

Note that important decisions, such as whether this admin is allowed to mark the order, are still checked by the backend. The frontend's job is to make the process clear and comfortable to use.

## Rendering: SSR, CSR, and Static Sites

There are several ways to produce the HTML a user sees, and the choice affects how fast pages appear, SEO, and server load.

- **Client-side rendering (CSR).** HTML is generated by JavaScript in the browser. MDN notes the benefits: page transitions do not need a full reload, so the app feels responsive, and later updates only need to fetch data from an API ([source](https://developer.mozilla.org/en-US/docs/Glossary/CSR)).
- **Server-side rendering (SSR).** HTML is generated on the server and sent to the client. According to MDN, SSR pages remain partly usable without JavaScript, are easier for search engine and social media crawlers to read, and let the server fetch all needed data at once ([source](https://developer.mozilla.org/en-US/docs/Glossary/SSR)).
- **Static sites.** Content is generated at build time rather than at request time, and can be served from a CDN without an application server ([source](https://developer.mozilla.org/en-US/docs/Glossary/SSR)).

MDN stresses that SSR and CSR are not mutually exclusive and can be combined in one application, for example with the server sending a page skeleton and the client fetching additional data ([source](https://developer.mozilla.org/en-US/docs/Glossary/CSR)). An app that loads a single document and then updates its content through JavaScript is called a single-page application (SPA). MDN notes that SPAs can feel more dynamic, with tradeoffs in SEO, state management, navigation, and performance monitoring ([source](https://developer.mozilla.org/en-US/docs/Glossary/SPA)). For Next.js projects, rendering strategies are compared in detail in [SSR, SSG, or ISR](/en/blog/ssr-ssg-isr-nextjs).

## Frontend Frameworks and Libraries

MDN explains that a framework is a library that offers opinions about how software gets built. Those opinions make an application more predictable, and predictability helps an application stay maintainable as it grows ([source](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Introduction)). MDN names Ember, Angular, Vue, and React as the current "big four" client-side frameworks.

React, for example, presents itself as the library for web and native user interfaces. React builds interfaces from individual pieces called components, then combines them into screens, pages, and apps ([source](https://react.dev/)). This component approach makes it easier for a team to reuse the same parts, such as a product card or data table, across many pages.

A framework is not mandatory. For pages that are almost entirely static, HTML and CSS with a little JavaScript is enough. The choice should weigh how interactive the app is, the skills of the team that will maintain it, and SEO needs. At CDS, web apps and platforms are built with React, Next.js, or Astro, chosen per project based on requirements, the client's internal team, and long-term running costs ([source](/en/services/software)).

## Frontend Qualities to Protect

AWS says frontend developers aim to create a positive user experience, optimize the application for accessibility and performance, and build responsive designs that work well across platforms and devices ([source](https://aws.amazon.com/compare/the-difference-between-frontend-and-backend/)). The four areas below are a useful reference.

### Performance and Core Web Vitals

Google sums up page experience in three Core Web Vitals metrics, with these "good" thresholds ([source](https://web.dev/articles/vitals)):

| Metric | Measures | Good target |
| --- | --- | --- |
| Largest Contentful Paint (LCP) | Loading speed of the main content | Within 2.5 seconds of the page starting to load |
| Interaction to Next Paint (INP) | Responsiveness to interactions | 200 milliseconds or less |
| Cumulative Layout Shift (CLS) | Visual stability (no jumping layout) | 0.1 or less |

Google recommends measuring these targets at the 75th percentile of page loads, segmented across mobile and desktop ([source](https://web.dev/articles/vitals)). Google Search Central also states that good Core Web Vitals align with what its core ranking systems seek to reward ([source](https://developers.google.com/search/docs/appearance/core-web-vitals)). A technical checklist for Next.js is in [Next.js for SEO and Core Web Vitals](/en/blog/seo-core-web-vitals-nextjs).

### Responsive Design

MDN defines responsive web design as an approach that makes web pages render well on all screen sizes and resolutions while keeping good usability. Its techniques include flexible layouts with grid and flexbox, media queries, responsive images, and the viewport meta tag so pages display properly on mobile devices ([source](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design)).

### Accessibility

The W3C's Web Content Accessibility Guidelines (WCAG) explain how to make web content more accessible to people with disabilities. WCAG 2.2 has 13 guidelines organized under four principles: perceivable, operable, understandable, and robust, with success criteria at levels A, AA, and AAA ([source](https://www.w3.org/WAI/standards-guidelines/wcag/)). Frontend examples include text alternatives for non-text content such as images, making all functionality available from a keyboard, and making content easier for users to see and hear ([source](https://www.w3.org/WAI/standards-guidelines/wcag/glance/)).

### Client-Side Security

Frontend code runs on the user's device, so anyone can view and modify it. Browser validation helps usability, but security checks must still happen on the backend. A classic frontend risk is Cross-Site Scripting (XSS). OWASP describes XSS as an injection attack in which malicious scripts are injected into otherwise trusted websites, and the flaw appears when an application uses user input in its output without validating or encoding it. Such a script can access cookies, session tokens, or other sensitive information held by the browser ([source](https://owasp.org/www-community/attacks/xss/)). Pre-production guardrails are covered in [Next.js Security and Deployment](/en/blog/nextjs-security-deployment).

## What Is a Frontend Developer?

A frontend developer builds and maintains the interface side of an application. AWS lists the core skills as JavaScript, CSS, and HTML, design knowledge for creating engaging user flows, frontend frameworks, and performance optimization ([source](https://aws.amazon.com/compare/the-difference-between-frontend-and-backend/)).

A frontend developer's tasks, summarized from the sections above:

- Turning UI/UX designs into working components and pages.
- Connecting the interface to the backend API, including loading, empty, and error states.
- Making pages responsive across screen sizes.
- Protecting page performance and tracking metrics such as Core Web Vitals.
- Applying accessibility practices and preventing flaws such as XSS.
- Writing interface tests and helping fix issues after release.

A developer skilled in both frontend and backend is called a full-stack developer ([source](https://aws.amazon.com/compare/the-difference-between-frontend-and-backend/)).

## How a Business Can Assess a Project's Frontend

A business owner does not need to read code to judge frontend quality. The checklist below is an internal CDS guide, not an official standard:

- **Test on the devices your users have.** Open it on your field team's or customers' phones, not only on office laptops.
- **Ask for a Core Web Vitals report.** Request LCP, INP, and CLS results for key pages, along with the tool used to measure them.
- **Run the main flows end to end.** Fill in a form, submit an order, and see what happens when data is wrong or the connection drops.
- **Check basic accessibility.** Can forms be completed with the keyboard alone, and do important images have text alternatives?
- **Ask about the rendering choice and why.** Pages that need to appear on Google have different needs from an internal dashboard behind a login.
- **Make sure code and components are handed over.** Including documentation so another team can continue the work.

Acceptance testing before release can follow the [UAT guide](/en/blog/uat-adalah). Budget components for frontend, design, and integration are covered in [web application development cost](/en/blog/biaya-pembuatan-aplikasi-berbasis-web), while post-release costs are in [application maintenance cost](/en/blog/biaya-maintenance-aplikasi).

## Frontend in CDS Projects

In our [custom software development service](/en/services/software), frontend work covers web apps and platforms, iOS and Android mobile apps, e-commerce and business sites, and internal dashboards. The process starts with the Design phase: wireframes to a clickable prototype, tested with real users before development starts. Building runs in two-week sprints with code review, automated tests, and a demo every Friday, and every release includes full source code, staging and production environments, and technical documentation ([source](/en/services/software)).

If your current application is slow or hard to use and you are not sure whether to fix it or rebuild it, our [IT consulting](/en/services/consulting) team can help map the problem first. We also build our own products such as [Zetta CRM](/en/incubating/zetta-crm), and you can see our client work in our [portfolio](/en/works).

## Frontend FAQ

### What is a frontend in simple terms?

A frontend is the part of an app or website that users see and use, such as pages, menus, buttons, and forms. Its code runs in the browser or app on the user's device.

### What is the difference between frontend and backend?

The frontend handles presentation and interaction on the user's device. The backend handles data, business rules, and security on the server. The frontend sends a request, the backend processes and answers it, and the frontend displays the result.

### Which languages are used for frontend development?

The foundation is HTML for structure, CSS for presentation, and JavaScript for behavior. On top of that, developers can use frameworks or libraries such as React, Vue, Angular, or Ember.

### What is a frontend developer?

A frontend developer builds the application interface: turning designs into code, connecting it to the backend API, and protecting performance, responsive layout, and accessibility.

### Is frontend the same as UI/UX?

No. UI/UX is design work, while frontend is the programming work that turns that design into a working interface. The two work side by side in a project.

### What are micro frontends?

Micro frontends are an approach that breaks a large frontend into smaller pieces that are developed and released separately, similar to how microservices split a backend. An article on martinfowler.com lists the benefits as smaller, more maintainable codebases, more autonomous teams, and incremental upgrades, with costs that include larger downloads from duplicated dependencies and operational and governance complexity ([source](https://martinfowler.com/articles/micro-frontends.html)). The same article frames it around large products worked on by many teams at once.

## Need a Fast, Easy-to-Use Frontend?

The frontend shapes your customers' first impression and how comfortably your team uses an application every day. CDS helps design and build frontends for web apps, mobile apps, e-commerce, and internal dashboards, with prototypes tested by users and code handed over to your team. Discuss your needs through our [software services](/en/services/software) page.


---

*Markdown version of https://www.ciptadusa.com/blog/frontend-adalah — generated for AI agents and LLM crawlers.*