Frontend Developer

Frontend Developer handles the core on-the-job duties listed here and this page contains 26 real tasks you can try. Expect clear steps and real-world examples to show how work flows in Computer Science. Each one shows where we found it, and comes with an AI prompt you can copy and use straight away.

26evidenced tasks
26ready prompts
10tools of the trade
15-1254.00O*NET-SOC code
70,190hold this job (US, BLS 2025)
$92,650median pay/yr (US)
Open Frontend Developer in the interactive atlas →

What it pays

Government survey numbers — not estimates, not ads.

Half of all Web Developers in the U.S. earn more than $92,650 a year — the middle 80% land between $48,100 and $162,290. About 70,190 people in the U.S. do this work. Figures are for the U.S. occupation group “Web Developers”. (U.S. Bureau of Labor Statistics survey, published 2025.) In India, Professionals earn about ₹38,298 a month on average — around ₹4.6 lakh a year (government PLFS survey via ILOSTAT, occupation-family figure).
$92,650typical pay / year
70,190people in this work
$162,290+top 10% earn
₹4.6 lakha year in India (family avg)
Think you get this job?Six quick questions on how it really works — with a hint and the reason behind every answer.
Test yourself →

The work, task by task

These are the real jobs-to-be-done, not a wish list. Each task shows where we found it, and the prompt underneath is written for that exact task.

Fixing1

Troubleshoot and fix website issues

+
Track down intermittent layout break on checkout page, reproduce steps on Chrome and Firefox, capture console…
Track down intermittent layout break on checkout page, reproduce steps on Chrome and Firefox, capture console errors and failing component stack, patch CSS/JS to restore responsive grid, run unit tests and open a PR for review before noon Friday.
The tools that do the workAJAXESCOjob descriptionsO*NET
Convincing1

Collaborate with designers and other developers

+
Run a working session with Maya in design and Sam in backend to align header, mobile nav and API contract,…
Run a working session with Maya in design and Sam in backend to align header, mobile nav and API contract, record agreed props and edge cases, implement shared component in the repo and request design review by Tuesday afternoon.
The tools that do the workAJAXjob descriptionsO*NETWikipedia
Protecting1

Design website architecture and components

+
Sketch component tree for account dashboard, define props, accessibility requirements and state boundaries,…
Sketch component tree for account dashboard, define props, accessibility requirements and state boundaries, extract reusable card and list components, update storybook entries and add integration tests for data loading.
The tools that do the workAJAXjob descriptionsWikipedia
Learning2

Maintain and scale websites

+
Audit front-end performance on high-traffic pages, identify render bottlenecks and third-party scripts,…
Audit front-end performance on high-traffic pages, identify render bottlenecks and third-party scripts, implement code-splitting and lazy loading for images and widgets, measure improvements and schedule deployment for Wednesday night.
The tools that do the workAmazon Elastic Compute Cloud EC2job descriptionsWikipedia

Look for ways to improve the application

+
Run a heuristics review of the onboarding flow, gather analytics on drop-off points, prototype two faster…
Run a heuristics review of the onboarding flow, gather analytics on drop-off points, prototype two faster alternatives for first-time users, A/B test them for two weeks and recommend the winner to product.
The tools that do the workAJAXESCOO*NET
Analysing1

Test and debug web applications

+
Run a test-and-debug pass on the checkout frontend: reproduce reported failures, add unit and end-to-end…
Run a test-and-debug pass on the checkout frontend: reproduce reported failures, add unit and end-to-end checks, log exact repro steps, assign fixes to Sam and Priya, and confirm regression tests pass before sending a status update to PM Ravi today.
The tools that do the workAJAXESCOjob descriptionsO*NETWikipedia
The daily work20

Ensure cross-browser compatibility and responsiveness

+
Verify the site renders correctly across Chrome, Firefox, Safari and Edge at desktop, tablet and phone…
Verify the site renders correctly across Chrome, Firefox, Safari and Edge at desktop, tablet and phone widths, fix CSS issues so breakpoints match the design system, then run the accessibility and layout tests and report remaining gaps by Friday.
The tools that do the workAJAXO*NETWikipedia

Stay updated with emerging web technologies

+
Compile a weekly reading list of new frameworks, browser features and component libraries, prioritise items…
Compile a weekly reading list of new frameworks, browser features and component libraries, prioritise items that affect our build or performance budget, summarise implications for our stack and recommend one experiment to run next sprint.
The tools that do the workAdobe Creative Cloudjob descriptionsO*NET

Analyze user needs to determine technical requirements.

+
Interview product, design and two power users to capture tasks they must do, translate those into functional…
Interview product, design and two power users to capture tasks they must do, translate those into functional UI requirements and a prioritized checklist of edge cases and input validations for the next sprint planning meeting.
The tools that do the workAdobe Acrobatjob descriptionsO*NET

Integrate databases into web applications

+
Connect the frontend to the production data store, implement fetch and error handling for list and detail…
Connect the frontend to the production data store, implement fetch and error handling for list and detail views, add integration tests that mock responses and validate state updates before asking backend to enable CORS.
The tools that do the workAmazon DynamoDBAJAXjob descriptionsWikipedia

Back up files from Web sites to local directories for instant recovery in case of problems.

+
Create a scheduled routine to mirror new and changed website files into a dated local directory nightly,…
Create a scheduled routine to mirror new and changed website files into a dated local directory nightly, verify checksums match and keep three rolling copies so developers can restore any build within 24 hours.
The tools that do the workAmazon Elastic Compute Cloud EC2O*NET

Select programming languages, design tools, or applications.

+
Evaluate current and candidate languages, component libraries and design tools against our performance, team…
Evaluate current and candidate languages, component libraries and design tools against our performance, team familiarity and delivery deadlines, score them and recommend one stack choice with migration steps for the next quarter.
The tools that do the workAmazon Web Services AWS CloudFormationO*NET

Document web-accessible software based on designs

+
Write the developer-facing documentation for the new customer portal so it explains accessible behaviors,…
Write the developer-facing documentation for the new customer portal so it explains accessible behaviors, keyboard flows, ARIA roles, component API with examples, and the markup/stylesheet snippets developers must copy into the codebase before QA on Friday.
The tools that do the workAJAXESCO

Align the client's web presence with its business strategy

+
Audit the public site against the revised business goals, list priority mismatches between messaging,…
Audit the public site against the revised business goals, list priority mismatches between messaging, conversion flows and landing pages, recommend three design and content changes tied to revenue impact, and produce a one-page roadmap for the marketing sprint starting Monday.
The tools that do the workAmazon Web Services AWSESCO

Monitor security system performance logs to identify problems and notify security specialists when problems occur.

+
Monitor the security logs dashboard for error spikes and auth failures every hour, flag any repeated 500s,…
Monitor the security logs dashboard for error spikes and auth failures every hour, flag any repeated 500s, XSS or CSP violations, capture the failing request samples, and notify Miguel and the on-call security specialist with timestamps and repro steps.
The tools that do the workAJAXO*NET

Install and configure hypertext transfer protocol (HTTP) servers and associated operating systems.

+
Provision the new server image, install the HTTP server and the required runtime, apply the latest OS…
Provision the new server image, install the HTTP server and the required runtime, apply the latest OS security patches, enable automatic updates, and hand the instance to Dan in ops with the access key and the checklist.
The tools that do the workAmazon Elastic Compute Cloud EC2O*NET

Develop system interaction or sequence diagrams.

+
Draw sequence and interaction diagrams for the login flow showing browser events, API calls, middleware…
Draw sequence and interaction diagrams for the login flow showing browser events, API calls, middleware checks, and database responses, then export one diagram for the API team and one simplified version for QA.
The tools that do the workAdobe IllustratorO*NET

Create technical and functional documentation

+
Write the technical and functional spec for the new search component including props, public API, state…
Write the technical and functional spec for the new search component including props, public API, state machine, error states, acceptance criteria, and code examples, then publish it to the docs site and notify Priya in product.
The tools that do the workAdobe InDesignjob descriptions

Implement communication between client and server using HTTP

+
Implement the client-server communication for the product page using HTTP GETs and POSTs, handle JSON…
Implement the client-server communication for the product page using HTTP GETs and POSTs, handle JSON serialization, retries on 429/5xx, CSRF token refresh, and surface detailed errors to the user and telemetry.
The tools that do the workAJAXWikipedia

Design and develop server-side application logic

+
Design and build the server-side application logic for the checkout flow: validate input, calculate totals,…
Design and build the server-side application logic for the checkout flow: validate input, calculate totals, call the payment gateway, persist the order, emit events for fulfillment, and add unit tests before handing to QA.
The tools that do the workAmazon Elastic Compute Cloud EC2Wikipedia

Respond to user email inquiries, or set up automated systems to send responses.

+
Reply to Sarah's backlog of user support emails about layout bugs and accessibility questions with clear…
Reply to Sarah's backlog of user support emails about layout bugs and accessibility questions with clear answers, triage any repeat reports into the bug tracker, and set up an auto-reply for common issues that links to the accessibility guide by Tuesday.
The tools that do the workAJAXO*NET

Renew domain name registrations.

+
Check our domain registrar account for frontend-prod.example.com and renew the two expiring domains, update…
Check our domain registrar account for frontend-prod.example.com and renew the two expiring domains, update billing to the company card, and confirm DNS propagation and certificate renewal with the ops team before end of day Friday.
The tools that do the workAJAXO*NET

Document test plans, testing procedures, or test results.

+
Write the test plan for the new responsive grid: list test cases, expected results, test data, browser/device…
Write the test plan for the new responsive grid: list test cases, expected results, test data, browser/device matrix, and how to log failures; attach a short how-to for running the automated visual tests and publish it to the QA folder by Wednesday.
The tools that do the workAJAXO*NET

Establish appropriate server directory trees.

+
Create the server directory layout for the static assets: separate folders for images, fonts, css, js,…
Create the server directory layout for the static assets: separate folders for images, fonts, css, js, vendor, and builds; include a README that states cache rules and deploy scripts, then commit the structure to the repo before the next sprint.
The tools that do the workAmazon Elastic Compute Cloud EC2O*NET

Document technical factors such as server load, bandwidth, database performance, and browser and device types.

+
Compile a one-page technical summary of server load, bandwidth, DB query times, error rates, and the top five…
Compile a one-page technical summary of server load, bandwidth, DB query times, error rates, and the top five browsers and devices seen last month, include graphs and recommendations for capacity, then send it to Priya and Marcus by Thursday morning.
The tools that do the workAmazon RedshiftO*NET

Create Web models or prototypes that include physical, interface, logical, or data models.

+
Produce interactive prototypes that show the interface flows, component states, and data structures for the…
Produce interactive prototypes that show the interface flows, component states, and data structures for the new checkout: include clickable screens, JSON examples for the API payloads, and notes on edge cases, and hand off to the backend team on Monday.
The tools that do the workAJAXO*NET

Says who?

These are the pages we read to build this. Open any of them and check us.

The logs, files & records this job keeps

Shared with other careers — the same record means something different in each.

Related careers

Same family of work — each with its own tasks and prompts.

The LLOS Work Atlas is the world's largest evidenced task library — a map of human work, with a ready prompt behind every task. 1,774 careers · every task named by the sources that witnessed it — O*NET, ESCO, real job descriptions, Wikipedia — and the deepest tasks by several at once. And it is honest about limits: where AI cannot help, the map says so.

The rest of the map

Same library, five ways in.

Copyright © LLOS.ai · 2026 — original pedagogy, voice, and design — all rights reserved.
Built on public evidence: O*NET®, ESCO, Wikipedia, U.S. Bureau of Labor Statistics, ILOSTAT. All sources & licenses