Whatever a browser puts on screen, the menu you click and the form you fill in included, was built by a front-end developer. Designers draw it first. Somebody still has to make it work.
That work happens in HTML, CSS and JavaScript, and the last of those is nearly everywhere. 98.1% of pages in the HTTP Archive’s 2025 Web Almanac request at least one script file, and that count leaves out scripts written inline in the HTML.
Developers take a designer’s mockup, hook it up to back-end data through an API, and get measured against published standards like WCAG accessibility criteria and Core Web Vitals thresholds.
What Is Front-End Development?
Everything a visitor sees and touches in the browser falls under front-end development. It’s the client-side layer of a website or application, written in HTML and CSS with JavaScript on top for anything interactive.
Client-side development, UI development and front-end engineering all point at the same work. Hiring pages use front-end developer and front-end engineer interchangeably.
That covers page layout and navigation menus, forms and buttons, animations and transitions, and the display of whatever data arrives from a server.
The other side of the line holds servers, databases, login logic and the rest of what users never see. That’s back-end work, and the two halves talk to each other through an API.
The scope reaches well past brochure sites. Interactive web applications such as online calendars and shopping carts depend on the front end to react to every click without reloading the page. Analytics dashboards work the same way.
HTML, CSS and JavaScript
Structure comes from HTML. CSS handles how it looks, and JavaScript decides what happens when someone does something. Browsers run all of them natively, which is why every front end ends up built from the same material.
Stack Overflow’s 2025 Developer Survey puts JavaScript at 66% and HTML/CSS at 61.9%, ahead of SQL and Python, among 31,771 respondents.
HTML and page structure
Headings, paragraphs, links, images, forms and tables all get marked up in HTML. The browser reads it first and builds the page from it.
Semantic elements such as nav, main, article and button say what a block is, not just how it looks. A div styled to look like a button won’t take keyboard focus or respond to the Enter key until someone adds extra code, which is the usual argument for picking the right element in the first place.
In May 2019, the W3C and the WHATWG signed an agreement to maintain a single version of the HTML and DOM specifications, with the WHATWG as the home of that version. The WHATWG HTML Living Standard is the result.
CSS and layout
Layout is mostly Flexbox and Grid. Flexbox lines items up along one axis, while Grid works in rows and columns at the same time. Fonts, sizes, spacing and palettes get declared once and apply across every page.
Responsive behavior comes from media queries, which change the layout at set screen widths so one page can serve a phone and a desktop monitor.
Property names are what slow you down at first. A CSS cheat sheet saves a lot of tab switching.
JavaScript and behavior after load
Of the three, only JavaScript is a programming language. It reacts to clicks, typing, scrolling and other input by changing the page.
It does that by editing the document object model (DOM), the browser’s in-memory tree of the page, and by requesting data from servers in the background so the page never reloads. Form validation, live search, image carousels and cart counters all work this way.
Quirks like type coercion trip up newcomers, so a JavaScript cheat sheet on a second monitor earns its place.
TypeScript and ECMAScript
GitHub’s Octoverse 2025 report ranked TypeScript first among languages by monthly contributors in August 2025, ahead of Python and JavaScript.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript before the browser sees it. It adds static types that get checked before the code runs, plus better editor autocomplete and safer renaming. The cost is a build step and a config file.
For a first project, plain JavaScript is fine. TypeScript pays off once a codebase or team grows.
ECMAScript is the specification behind the JavaScript language itself, published by Ecma International as ECMA-262. The 16th edition, ECMAScript 2025, was approved in June 2025, and a new edition has shipped every June since 2016.
How a Browser Turns Front-End Code Into a Page
The browser parses HTML into the DOM and CSS into the CSS object model (CSSOM), then merges both into a render tree of visible elements. Layout computes the size and position of each element, and paint draws the pixels. JavaScript can change the DOM or the styles at any point, which sends the browser back through part of that cycle.
From markup to pixels
- The DOM gets one node per element, built step by step as the HTML downloads.
- The CSSOM holds the style rules, and those have to be complete before rendering starts.
- The render tree combines the two and keeps visible content only.
- Layout works out the size and position of each node, then paint puts the pixels on screen.
MDN Web Docs notes that more DOM nodes make every later step slower, so oversized markup costs rendering time.
One click, traced from browser to server
An “add to cart” button shows exactly where the front end stops and the back end starts.
| Step | Runs on | What happens |
|---|---|---|
| Click | Browser | JavaScript event handler fires |
| Request | Browser to server | Product ID sent through an API call |
| Update | Server | Stock checked, cart saved in the database |
| Response | Server to browser | Updated cart returned as structured data, usually JSON |
| Render | Browser | Script updates the DOM, the cart badge changes |
Most storefronts expose that exchange through a REST-style API. The front-end developer calls it, handles slow or failed responses, and shows the result.
Client-side rendering and where it fails
The median mobile home page shipped 632 KB of JavaScript in 2025, up from 558 KB in 2024, according to the HTTP Archive’s Web Almanac.
Client-side rendering means the browser downloads a script and runs it before anything gets built. Server-side rendering sends finished HTML up front instead, and JavaScript attaches afterward, so the first screen shows up sooner.
The Almanac’s own verdict is that overusing JavaScript slows loading and leaves pages unresponsive, because every byte costs the browser time to download and then run.
For pages that are mostly reading material, rendering on the server is the safer default.
What Front-End Developers Do, From Mockup to Live Page
The job starts with a design mockup and ends with something live. In between, the developer builds the interface, wires it to back-end data, makes it survive different screens and browsers, and tests it before it ships.
Core responsibilities
Mockups get built as reusable components, and the layout has to fit phones, tablets and desktops from a single codebase. Every API call needs a loading state and an error state, plus whatever the success view looks like.
Testing means checking Chrome, Firefox, Safari and Edge. Chrome DevTools does most of the debugging work, since it can inspect the DOM, edit styles live and profile slow interactions.
The mockups arrive from UI and UX designers, who decide how the screens look and flow before any code exists.
On the data side, wiring screens to back-end APIs is where front-end work meets the server.
From design handoff to deployment
As of October 2026, Figma’s Dev Mode shows spacing, sizes and generated code for any selected layer, and flags frames as ready for development. Dev Mode is not available on Figma’s Starter plan (Figma Help Center).
- Read the handoff: specs, assets, states and the notes designers attach to each frame.
- Split the screens into components and write the semantic HTML for each one.
- Style them with CSS, starting at phone width and adding media queries upward.
- Add JavaScript for behavior and connect the data calls.
- Test across browsers, screen sizes and keyboard navigation, then fix what breaks.
- Submit the change for code review, merge it and deploy.
Performance work in practice
A front end that looks right and responds slowly is a broken front end.
redBus, an Indian bus ticketing site, tracked Interaction to Next Paint (INP), the Core Web Vitals metric for how fast a page responds to input, with Google’s web-vitals library. Chrome DevTools showed scroll handlers blocking the main thread on its search page.
The fixes were all front-end changes. Scroll events got debounced, and the page fetched 10 results per call instead of 30. Input state stayed local and synced to the shared store only when a field lost focus.
The search page’s INP improved by 72%, and redBus reported a 7% increase in sales, per a web.dev case study (last updated May 2023).
Front-End Frameworks, Libraries and Tools
React, Angular, Vue.js and Svelte cover most framework decisions. The right pick mostly comes down to team size and project type, with the hiring pool often deciding it.
Underneath all of that sit a runtime, a package manager, a bundler and version control.
Frameworks and libraries
Next.js, a React framework maintained by Vercel, adds routing and server rendering on top of React.
| Tool | Type | Used by (2025 survey) | Main trade-off |
|---|---|---|---|
| React | UI library | 44.7% | Routing and data loading need extra choices |
| Angular | Full framework, maintained by Google | 18.2% | Strong structure, steeper start |
| Vue.js | Progressive framework, adoptable step by step | 17.6% | Smaller hiring pool than React |
| Svelte | Compiler-based framework | 7.2% | Smallest community of the four |
Usage figures come from Stack Overflow’s 2025 Developer Survey, covering 23,678 respondents on web frameworks.
Svelte’s documentation says it compiles components into lean JavaScript ahead of time, and SvelteKit is its companion framework for full-stack apps.
React’s own documentation recommends starting a new project with a framework such as Next.js or React Router (maintained by Shopify), and lists building from scratch on a tool like Vite as the alternative (react.dev, as of October 2026).
Hiring pool is usually the deciding factor, because React has the largest share by a wide margin. For options beyond these four, a ranking of the top JavaScript frameworks covers the rest.
CSS tooling
Tailwind CSS puts utility classes right in the markup instead of in separate stylesheets. Bootstrap gives you prebuilt components and a grid, so it’s quick for admin screens and prototypes. Sass adds variables, nesting and mixins, all compiled into plain CSS.
Native CSS nesting became Baseline Newly Available in August 2023 (web.dev), which puts it past the 30-month Widely available mark by February 2026.
For a new project, that removes one of the main reasons to add Sass.
Build tools and version control
Among front-end build tooling, npm was used by 56.8% of respondents in the same Stack Overflow survey, Vite by 25.4% and webpack by 18.4%.
Node.js runs JavaScript outside the browser, which is why build tools run on it, and npm installs packages from a shared registry.
Vite’s documentation (version 8.3.4 as of October 2026) draws a line between development and production. In development, source is served over native ES modules, dependencies are pre-bundled once, and hot module replacement swaps a single changed module without a full page reload. Production gets bundled, optimized output, because unbundled modules add network round trips.
The same docs say Rolldown, a Rust bundler, now replaces the earlier pair of esbuild for development and Rollup for builds.
Vite’s docs describe bundler-based setups, the category webpack belongs to, as building the entire application before serving it.
Teams track every change to the codebase with Git, a distributed version control system, so branches can be reviewed, merged and rolled back.
When a framework is the wrong choice
A framework is the wrong choice for pages that are mostly content, and GOV.UK’s guidance says so in writing.
The GOV.UK Service Manual says a service built mostly from Design System components, without a complex interface, does not need a client-side JavaScript framework.
It also says not to build a service as a single-page application (SPA), and to use JavaScript only to enhance HTML and CSS so users can still finish the task if the script fails. The name for that approach is progressive enhancement. The page works with HTML first, and CSS and JavaScript get added after.
React’s documentation sets the opposite default for new projects, and both can be right. GOV.UK has to work for the public on any device and connection. A dashboard serves signed-in users on a stack you already know.
A script error or a blocked bundle leaves a client-rendered page blank, and every framework adds a build step and a JavaScript payload to maintain.
My rule is simple. If the page reads more than it reacts, start with HTML and CSS, and add a framework once the interface has state to manage.
How Front-End Development Differs From Back-End and Full-Stack Work
Front-end code runs in the browser and back-end code runs on servers. Full-stack developers cover both.
| Aspect | Front end | Back end | Full stack |
|---|---|---|---|
| Languages | HTML, CSS, JavaScript, TypeScript | Python, Java, PHP, Ruby, Node.js | Both sets |
| Owns | Interface, interaction, data display | Storage, business rules, authentication | Features end to end |
| Visible failure | Broken layout, slow interactions | Wrong data, downtime, security gaps | Shallow depth on one side |
Validation shows why the split matters. A front end can check a form field for usability, but only the server can enforce the rule, because anyone can bypass browser code.
The contract between the two sides
The two halves agree on an API contract, and the style of that contract changes the front end’s workload.
With a REST-style API, each resource has fixed endpoints, so one screen can need several calls to assemble a view. GraphQL gives the client a single endpoint and lets it name the exact fields it needs. That trims over-fetching but moves query design onto the front end.
Teams weighing the two can read a comparison of REST and GraphQL in web apps before the first screen is built.
How common each role is
Stack Overflow’s 2025 Developer Survey lists full-stack as the most common role at 27% of 43,560 respondents, ahead of back-end at 14.2% and front-end at 4.3%.
Front-end held 5.6% in the 2024 edition. The survey records the title people chose, not the hours they spend on each layer.
Small teams get more from a full-stack hire, while interface-heavy products still justify a front-end specialist. A breakdown of software development roles shows where each one fits.
What Makes a Front End Good: Accessibility, Performance and Browser Support
Published standards exist for most of what makes a front end good. WCAG covers accessibility, the Core Web Vitals thresholds cover performance, and Baseline covers browser support.
Accessibility under WCAG
WCAG 2.2 is a W3C Recommendation, and its current edition is dated 12 December 2024. Success criteria are sorted into conformance levels A, AA and AAA.
It removed one criterion, 4.1.1 Parsing, and added nine, including Target Size (Minimum) and Focus Not Obscured (Minimum).
Two of the Level AA criteria are new in 2.2. Pointer targets need to reach at least 24 by 24 CSS pixels unless an exception applies, and a focused control can’t be entirely hidden by author-created content. Contrast is the older one. Text needs at least 4.5:1 against its background, or 3:1 for large text (Level AA).
WebAIM’s 2025 analysis of one million home pages found detected WCAG 2 failures on 94.8% of them, averaging 51 errors per page.
Pages that used ARIA attributes averaged 57 errors against 27 for pages without them. WebAIM calls that an association, not proof of cause, but it matches the rule of using native elements first.
Performance and Core Web Vitals
Core Web Vitals boil page performance down to field metrics, each judged at the 75th percentile of page loads and segmented across mobile and desktop.
| Metric | Measures | Good threshold |
|---|---|---|
| LCP | Loading: when the largest visible element renders | 2.5 seconds or less |
| INP | Responsiveness: delay after user input | 200 milliseconds or less |
| CLS | Visual stability: unexpected layout shifts | 0.1 or less |
A page passes only when every metric meets its target, and INP became a stable Core Web Vital in 2024 (web.dev, last updated October 2024).
In the HTTP Archive’s 2025 Web Almanac, 48% of mobile origins passed all three, up from 44% in 2024.
Lighthouse, the lab audit tool, cannot measure INP because a simulated load has no user input. Total Blocking Time stands in as a lab proxy, and web.dev states that only field data captures the full picture.
T-Mobile joined Core Web Vitals field data to its analytics suite, improved LCP by 42%, and reported a 60% improvement in the rate of shopping-intent visits that ended in an order (web.dev case study, March 2025).
Browser support and Baseline
Baseline is the browser-support signal on web.dev, and a feature moves through it in stages. It becomes Newly available once every core browser supports it, so it’s interoperable. It becomes Widely available 30 months after that date, when most sites can use it without worrying about support.
As of October 2026, the core browser set covers Chrome (desktop and Android), Edge, Firefox (desktop and Android) and Safari (macOS and iOS).
Each release should rerun against that set, which is regression testing applied to rendering, so a CSS change does not break Safari unnoticed.
Baseline reports when browsers shipped a feature, not which versions your visitors run. web.dev’s RUMvision case study (February 2025) makes the same point and recommends checking real user data before adopting newer features.
Front-End Developer Pay and Job Outlook
The Bureau of Labor Statistics (BLS) publishes no front-end-only wage. Front-end developers sit inside its web developers occupation, which had a median annual wage of $92,650 in May 2025.
The figures below come from the BLS Occupational Outlook Handbook, page last modified August 27, 2026.
- Median annual pay for web developers and digital designers combined was $99,520 (May 2025).
- For web developers only it was $92,650 (May 2025).
- Employment is projected to grow 5% from 2025 to 2035, against 3% for all occupations.
- About 13,600 openings are projected per year, many from workers who leave or switch occupations.
Why salary sources disagree
The same BLS page splits the field up, and each grouping changes the headline number.
Web developers had 87,400 jobs in 2025 and 4% projected growth. Web and digital interface designers had 132,700 jobs, a median of $104,000 and 6% projected growth. The combined category covers 220,100 jobs at 5% projected growth.
Quoting the combined median instead of the web developer median adds $6,870 to the headline figure.
Industry moves pay further: among web developers’ top industries, medians ran from $119,940 in information to $84,450 in educational services, a spread of $35,490.
BLS wages come from its Occupational Employment and Wage Statistics survey, a different method from the samples job sites compile. A salary quoted without its reference year is not comparable, because each edition updates the figures.
Skills, education and the AI caveat
BLS lists a thorough grasp of HTML as the baseline requirement, with many employers also asking for JavaScript or SQL.
It gives a bachelor’s degree as the typical entry-level education but says requirements range from a high school diploma to a bachelor’s degree. Workers may skip credentials when prior work or projects prove the skill.
BLS also flags a drag on growth: improving development tools and wider use of AI tools for developers may soften employment growth and let workers in other occupations handle basic web development tasks.
My read is that depth in the browser platform (semantic HTML, CSS layout, JavaScript, accessibility) is harder to substitute than basic page assembly.
Front-End Development FAQ
Is front-end work the same as web design?
No. Web design decides how an interface looks and behaves for the user, while front-end work builds that design in HTML, CSS and JavaScript.
BLS lists web and digital interface designers and web developers as separate occupations, though the two roles share a constant handoff.
Does a front-end engineer do different work than a front-end developer?
No, not in substance. Both titles describe browser-side interface work, and the label depends on the employer.
The job description tells you more. Architecture, build tooling or testing infrastructure points to an engineer-level scope.
How do you become a front-end developer, and in what order?
Learn in layers. HTML comes first, then CSS layout, then JavaScript, then Git, and only after that a framework such as React.
Publish two or three finished projects as you go. A deployed page shows skill that a course certificate does not.
Which part of front-end work is hardest to learn?
JavaScript is usually the steepest part. Asynchronous code and application state take practice, and the learning does not stop afterward.
In Stack Overflow’s 2025 survey, 69.1% of developers had learned new coding techniques or a new language in the past year.
What to Build First Before Choosing a Framework
A newcomer should start with one static page, built with semantic HTML and CSS layout plus a single plain JavaScript interaction, and deployed to a public URL.
That way every layer stays visible, and a framework later takes over work you already understand.
Start with semantic HTML and keyboard-reachable controls. Then write CSS that reflows at 320 CSS pixels wide (WCAG 1.4.10), and finish with one plain JavaScript interaction.
About 5% of home pages clear WebAIM’s automated accessibility checks, and fewer than half of mobile origins pass Core Web Vitals. A first page that meets both already beats the typical page in those datasets.
The trade-off is slower visible progress, because routing and component reuse are written by hand.
As of October 21, 2026, React’s documentation still recommends a framework for new projects, so adopt one once the page needs a second route or shared state.
- Application Performance Monitoring Beyond the Code: Why Infrastructure Matters - October 26, 2026
- How to Share GitHub Repository Access With Collaborators - October 25, 2026
- Streamlining Client Projects: Modern Cloud ERP Solutions - October 25, 2026
