What Is Frontend?
Author: Domeny.ForSale editorial team Published
In brief: Frontend is the part of a website or application that users see and interact with: the content layout, menus, buttons, forms and how they respond to user actions. On the web, it is built primarily using HTML, CSS and JavaScript. Backend, meanwhile, handles what happens behind the scenes, such as checking login credentials and saving orders.
What does frontend include?
Frontend is the interface: the layer that allows users to interact with a system. It includes not only the appearance of the screen but also how its elements behave: opening menus, selecting dates, displaying form errors or updating the contents of a shopping cart without reloading the page.
In an online store, frontend includes elements such as the product card, image gallery, list of variants and “Add to cart” button. It shows that the selected product has been added and may display a loading indicator while waiting for a response from the server.
Frontend is therefore more than decoration. Readable content, keyboard operation and proper functionality on phones are just as important as colours or animations. An attractive form that cannot be submitted or does not explain errors is still a poorly functioning interface.
Frontend vs backend — where is the boundary?
Backend is the part of a system that works behind the scenes, usually on a server. It implements the rules governing how a service works, checks permissions and communicates with the database. Frontend sends it requests and presents the results it receives in a form people can understand.
The two parts often communicate through an API, a defined way for programs to exchange data. For example, the frontend requests a list of available appointment slots, and the backend returns the data used to create the visible calendar.
The login process illustrates this division of responsibilities:
- The frontend displays the email address and password fields.
- Once the form is submitted, the data is sent to the backend over an encrypted HTTPS connection.
- The backend checks the credentials and decides whether to grant access.
- The frontend displays the account screen or a message indicating that the login attempt failed.
Checking in the browser whether a field is empty helps the user, but it does not secure the system. This check can be bypassed, so the backend must independently verify data and permissions. Secret keys and passwords should not be placed in frontend code: code and data delivered to the browser can be inspected.
Not every website needs an extensive backend. A simple website presenting services and contact details can consist of static files: ready-made documents sent to the user. Customer accounts, purchase histories and bookings require additional backend functionality or a connection to an external service.
HTML, CSS and JavaScript — three different roles
The core frontend technologies complement one another, but each has a different responsibility:
| Technology | Main role | Example |
|---|---|---|
| HTML | Defines the structure and meaning of content | A heading, link or form field |
| CSS | Describes the appearance and layout of elements | Colours, spacing, layout on a phone |
| JavaScript | Adds logic and dynamic behaviour | Filtering products without reloading the page |
HTML is a markup language, while CSS is a style sheet language. JavaScript is a programming language. A simple document containing text, images and links can work without JavaScript; not every interaction requires an additional script.
Larger projects also use libraries and frameworks: tools that provide ready-made mechanisms and a way to organise code. Examples include React, Vue and Angular. They help build interfaces from components — reusable parts such as a product card or dialog box — but do not replace an understanding of the fundamentals.
Modern applications can also prepare HTML on the server before it reaches the browser. This means the boundary between frontend and backend does not always align exactly with where the code runs. The most useful distinction remains the one between the user interface and the system’s behind-the-scenes functionality.
What does a frontend developer do?
A frontend developer implements the interface in code and ensures that it works. They may work from a visual design, but their job is not simply to reproduce an image. They must also account for situations that a static design does not show: missing data, a long title, a connection error or repeated clicks on a button.
Their work includes:
- Responsiveness: adapting the layout to different screen sizes.
- Accessibility: making the website usable with a keyboard and a screen reader as well.
- Performance: reducing unnecessary code and overly large resources.
- Backend integration: retrieving, sending and presenting data.
- Testing: checking functionality in different browsers and interface states.
An interface designer usually defines how the interface looks and how users interact with it, while a frontend developer turns those plans into a working website. In small teams, one person may combine these roles, but design and programming require different skills.
How can you start learning frontend?
The best first exercise is a small website, such as a simple site introducing a service. First, use HTML to build headings, a description, a list and contact details. Then add CSS to make the page readable on both wide and narrow screens.
Only then add JavaScript, for example for a simple price calculator. Check what happens when an invalid value is entered and whether every element can be operated without a mouse. This exercise shows the difference between a page that merely looks right and an interface people can actually use.
Read also
