Front end

Front end is the counterpart of the back end, which runs on the server and handles data, logins and logic out of sight. Front-end work is built with HTML, CSS and JavaScript, and front-end developers turn a designer's screens into working pages.

It is easy to confuse front-end development with design. A designer decides how things should look and behave; a front-end developer makes them actually do that in every browser and on every screen size, quickly and accessibly. On small sites one person often does both, but they remain separate skills.

How it works

When someone visits a page, the server sends the front-end code: the HTML for the content, stylesheets for the look and scripts for behaviour. The browser on the visitor's device assembles these into a page and handles every tap, scroll and keystroke from then on.

When the page needs live information, such as available booking slots or a basket total, the front end asks the back end through an API and updates part of the screen with the answer. How much of the page is built in the browser varies. Some sites send finished pages from the server; others, such as a single-page application, send a small shell and build most of the page with JavaScript.

Because the front end runs on the visitor's device, its performance depends on their phone and their connection, not on your server. A powerful server cannot rescue a page that sends a heavy bundle of scripts to an old phone on a weak signal. That is why lean front-end code matters more than it first appears.

Example

A travel agency's back end stores tours, dates and prices. The front end is the tour page a customer browses: photos, a date picker, a price that updates when they choose the number of travellers, and a button to request a booking.

In testing on a phone, the date picker opens beneath the on-screen keyboard and the price only updates after the page reloads. Customers give up halfway, even though the back end is working perfectly and every booking request that does arrive is processed correctly. Rebuilding just the picker and the price display fixes the drop-off without touching the back end at all. The lesson is that analytics showing people leaving a page often point to a front-end problem that nobody on the team experiences, because they test on large screens with fast connections.

Why it matters for your business

Visitors judge your business by the front end alone. Slow pages, broken layouts on phones or forms that confuse people lose enquiries directly, and you rarely hear about it because people simply leave. When you compare quotes, front-end quality is where much of the visible difference between a rushed and a careful build shows up: speed, mobile behaviour and accessibility. You can check it yourself by completing your own contact form on a phone, with one hand, on mobile data. Then try it again using only the keyboard on a laptop, pressing Tab to move between fields: if you cannot see where you are or cannot reach the submit button, some of your visitors cannot either. Both tests take a few minutes and reveal more than a design review.

Common mistakes

• Approving a design on desktop screenshots without seeing it working on a phone.
• Assuming a site works because it works in one browser on one computer.
• Treating accessibility as an add-on to fix later instead of part of the front-end build.
• Loading heavy animations and scripts that look impressive but slow down every visit.

Questions people ask

What is the difference between front end and back end?

The front end is everything that runs in the visitor's browser and that they see and touch. The back end runs on a server and stores data, processes forms, handles logins and sends the front end what it needs. Most websites need both.

Does a simple brochure website have a front end?

Yes. Every website has a front end, because something has to be shown in the browser. A simple brochure site may have almost no back end at all, especially if it is a static website that serves ready-made pages.

What does a front-end developer do?

A front-end developer builds the parts of a site people see and use. They turn designs into code, make layouts work on every screen size, keep pages fast, make sure forms and menus are accessible and connect the interface to data from the back end.