Skip to main content
Mobius
Beginner

What is front-end

Also known as: frontend, front end, front-end development, front-end developer

Definition

Front-end is the part of a website or app that users see and use, such as text, buttons, forms and images, built with HTML, CSS and JavaScript.

Why it matters

The front-end is where a customer decides whether to stay, book or buy, so a slow or confusing page loses leads the rest of the system never sees.

Common mistakes

Changing the design without re-testing forms and tracking tags, so lead and conversion counting stops silently.

Related terms

Worked exampleIllustration

One book an appointment button, taken apart

The booking page, parts tagged

  • Book an appointment button, phone fieldHTML
  • Colour, size, right to left layoutCSS
  • Phone check, time pickerJavaScript
  • Lead counted in analyticsTracking tag

Runs on

The visitor's phone or computer

Checked again on

The server, in the back-end

Steps

  1. HTML puts the button and a phone field on the page.

  2. CSS makes the button green, large enough to tap on a phone, and aligned to the right in Hebrew.

  3. JavaScript checks the phone field while the visitor types and opens the time picker.

  4. On tap, the page sends the details to the back-end, which checks them again.

  5. Decision: The same tap fires the analytics event the business uses to count its leads.

Change the colour carelessly and the button still works. Break the analytics event and the business stops counting its leads without noticing.

Illustration

How it works

The user, Front-end, Back-end, DatabaseThe userFront-endHTML, CSS, JavaScriptruns on thevisitor'sdeviceWhat users seeBehind the scenesBack-endPHP, Node.js, Pythonruns on theserverDatabaseMySQL
The front-end is the visible top layer: everything the user sees and touches in the browser.

Follow one tap on Pay

  1. 1PhoneThe customer taps Pay. The page sends the cart and the details.
  2. 2InternetThe request travels over the internet to the shop's server.
  3. 3ServerThe back-end checks the prices again, never trusting the price the phone sent.
  4. 4DatabaseThe database returns the real prices and the stock.
  5. 5Payment providerThe back-end asks the payment provider to charge the card and waits for approval.
  6. 6DatabaseThe database saves the order and reduces the stock.
  7. 7ServerThe back-end sends the answer back to the phone.
  8. 8PhoneThe page shows the thank you message.

Two of the eight stops run on the customer's phone, the tap and the thank you page. That is the front-end.

The front-end is the first and the last stop: it takes the tap on the visitor's phone and shows the answer. Everything in between happens elsewhere.

Definition

The front-end is the code that builds what a visitor sees and touches, and it is downloaded to and runs on the visitor's own phone or computer. It has three building blocks: HTML gives the page its structure (headings, text, buttons and form fields), CSS gives it its look (colours, sizes, layout, right to left for Hebrew), and JavaScript gives it its behaviour (checking a field as you type, opening a menu, sending a form). Because it runs on the visitor's device, its speed depends on their phone and their connection, and nothing in it can be trusted for prices or permissions, which the back-end checks again. UX decides how a page should work for the user, web design decides how it should look, and front-end development turns both into working code. A site builder such as Wix or WordPress gives you a ready made front-end on a back-end the platform manages.

Why it matters

Google measures it with three Core Web Vitals, judged at the 75th percentile of page loads. Largest Contentful Paint, how fast the main content appears, is good at 2.5 seconds or less. Interaction to Next Paint, how fast the page responds to a tap, is good at 200 milliseconds or less, and it replaced First Input Delay on 12 March 2024. Cumulative Layout Shift, how much the page jumps while it loads, is good at 0.1 or less. You can check any page for free in PageSpeed Insights. The front-end also carries the tracking tags that count your leads, so a careless change can stop your measurement while the page looks fine.

Directly related: Back-end, Full-stack, Client (computing).

Improvement tips

  • Check your main pages in PageSpeed Insights and fix the worst Core Web Vital first, which is often an oversized image.
  • After every front-end change, test the forms, the checkout button and the tracking tags, not only how the page looks.
  • Test the design on a small, older phone over mobile data, where most slowness shows.
  • Follow accessibility guidelines, so visitors who use a keyboard or a screen reader can book and buy too.
  • Open "View page source" in your browser to see the HTML your site actually sends to visitors.

Common mistakes

  • Judging speed on the office computer instead of on a mid range phone over mobile data.
  • Checking prices, discounts or permissions only in the front-end, where any visitor can change them.
  • Paying for custom front-end work when a site builder's ready made front-end would do.
Front-end vs Back-end

Related terms

TechnologyIntermediate

Back-end

Back-end is the part of a website or app that users never see: it saves orders, checks stock, charges cards and keeps accounts, running on a server.

TechnologyIntermediate

Full-stack

Full-stack describes a developer, or a team, who builds both what users see (the front-end) and the server and database behind it (the back-end).

TechnologyBeginner

Client (computing)

A client, in computing, is the program, such as a browser or an app, that sends a request to a server and shows you the answer. It is not your paying customer.

TechnologyIntermediate

API

An API (application programming interface) is the agreed way one program asks another for data or an action and gets an answer, so your tools can work together.

ProductBeginner

UI

UI, user interface, is what a person sees and taps on a screen, the buttons, text, menus and their layout, and it tells the eye where to look first.

Quick check

You are briefing a developer. Which part of your site is the front-end?

Choose an answer

Frequently asked questions

Do I need to understand front-end before I start my business?
Only enough to brief and hire. The front-end is the code behind everything your customers see and tap, so you can ask for speed on phones and working forms, not only for a nice design.
When does front-end first become relevant for a new business?
The day you build a website, a landing page or an app. A site builder gives you a ready made front-end, so the question becomes whether its templates are fast and flexible enough for you.
Should I build a custom front-end or use a website builder?
For a new business a site builder is usually the faster and cheaper start, because the platform runs the back-end for you. Custom front-end work pays off when you need something the builder cannot do, or when its speed holds you back.
How do front-end choices affect my budget?
Custom design and development cost more at the start and need a developer for later changes. Templates keep the start cheap but limit what you can change. Budget also for testing on phones and for maintenance after launch.
Why does front-end matter for a business already running?
It is where visitors decide to stay or leave. Improving a slow or confusing page can raise conversions, which you confirm by measuring before and after, not by how the new page looks.
What goes wrong when a business ignores its front-end?
Pages load slowly on phones, layouts break after browser updates and buttons become hard to tap. Visitors leave without telling you, and analytics shows it only as a falling conversion rate.
How do I improve the front-end without stopping day to day work?
Start with the pages that bring leads, such as the home page, a landing page or the checkout. Make one change at a time on a staging copy, test it, publish it, and compare the numbers before and after.
How do I know if my front-end is slowing down sales?
Run your main pages through PageSpeed Insights, check the Core Web Vitals report in Search Console, and look in analytics for pages where mobile visitors leave much faster than desktop visitors. Session recordings show where people get stuck.
What does front-end actually mean in plain words?
Everything you see and click when you open a website or an app: text, buttons, forms, images and menus. Front-end developers write the code that draws it on your screen.
Is front-end risky to change?
Less risky than the database, but not harmless. A front-end change can break a form, a checkout button or a tracking tag, which silently stops lead and conversion counting. Testing on a staging copy first reduces the risk, it does not remove it.
Do I need a developer to make front-end changes to my site?
Not for text, images and colours in a site builder or a content management system. You need a front-end developer for new layouts, interactive features and speed work, and for anything that touches forms and tracking.
Is front-end the same thing as web design or UX?
No, they are three jobs. UX decides how the page should work for the user, web design decides how it should look, and front-end development turns both into code that runs in the browser. One person may do more than one of them.

Sources: web.dev, Web Vitals (web.dev/articles/vitals), read 23 September 2026, web.dev, Interaction to Next Paint becomes a Core Web Vital on March 12 (web.dev/blog/inp-cwv-march-12), 2024, MDN Web Docs, Glossary (developer.mozilla.org/en-US/docs/Glossary), general reference

Last reviewed: 2026-09-23

I have worked with

What Clients Say

From different fields, at different stages of business

Dan Manto

Eclipse Capital

Real Estate Investment and Finance, USA

Arty McLabin

GameReady

Game Development Education and Outsourcing, International

Anna, Beautician

Anna

Beautician

After I finished a cosmetology course at a leading company, I was confused. I didn't know how to open a business, what to sell from home, or how to bring in clients. Since I reached out to Mobius, everything has changed. We built an organized plan with clear steps and no unnecessary risks. Today I see results, and I'm growing and developing every month.

Mark, Massage therapist, Gan Yavne

Mark

Massage therapist, Gan Yavne

When I finished a massage course, I imagined a different world. I found out it's a hard field, and financial stability isn't easy to find. When I came to Mobius, something changed. We started an organized process and built a business plan. Without Mobius? I probably would have given up. Today I believe in myself and in my own path.

Tech decisions bigger than your team?

Alex helps Israeli businesses choose technology that fits the business, not the hype. The first call is free.

+972 055-248-6151. Better on WhatsApp: I am in meetings most of the day and answer as soon as I am free.