Frontend developer

What does a frontend developer do?

A front end developer builds the part of a website or app that people see and use.

You write code that runs in the browser, turn designs into working screens, and keep them fast, secure and easy to use.

In Singapore, you usually sit in a product or engineering team. That could be at a bank, a government agency, an e-commerce firm, a start-up or a software house that builds for clients.

You work every day with product managers, UX and UI designers, backend developers and QA engineers. You also speak with business teams and users to find out what they need from the product.

What the work involves

• Build and update screens and components in HTML, CSS and JavaScript or TypeScript, usually with a framework such as React, Vue or Angular.
• Join planning and refinement sessions to understand user needs and agree what is feasible.
• Write unit and end-to-end tests, then fix the defects they find.
• Review teammates' code and refactor older code to keep it readable.
• Check pages for speed, accessibility and security weaknesses before release.
• Collect feedback from users and usability tests, then suggest changes to the interface.

Pay in Singapore

Back to top

Skills a frontend developer needs

Back to top

Frontend developer job description

We are hiring a front end developer to build and maintain the client-side of our web products.

You will turn designs into responsive, accessible interfaces, write tested code and work with designers, backend engineers and product owners in an agile team. You will also help improve page speed and spot security risks early.

Responsibilities

• Build responsive user interfaces from design files and written requirements.
• Write clean, testable code in JavaScript or TypeScript using a modern framework.
• Connect the interface to backend services through REST or GraphQL APIs.
• Write unit, integration and end-to-end tests and fix defects found in testing.
• Refactor existing code to improve readability and reduce technical debt.
• Check that pages meet accessibility standards and load quickly on mobile devices.
• Find security weaknesses in new and changed features, and use security tools to fix them.
• Manage code changes in Git, including branching, reviews and release notes.
• Take part in usability testing and turn user feedback into interface improvements.
• Give technical advice to product and design teams on options and trade-offs.

Requirements

• Diploma or degree in computer science, information technology or a related field, or equivalent skills shown through a bootcamp and a portfolio.
• Typically 1 to 3 years of experience for a mid-level role. Entry-level roles may accept internships and personal projects.
• Strong HTML, CSS and JavaScript, with TypeScript and at least one framework such as React, Vue or Angular.
• Working knowledge of Git, API integration and a testing tool such as Cypress or Playwright.
• Understanding of accessibility, web performance and basic web security.
• Clear communication, since you will explain technical choices to non-technical colleagues.

Back to top

Frontend developer career path

The SkillsFuture Skills Framework lists front end developer and senior front end developer as the main steps for this job.

Beyond that, many people move into lead or management roles.

1. Junior front end developer

   Entry

   You build small features and fix defects with guidance. You learn the team's codebase, testing habits and review process.

2. Front end developer

   Mid · SkillsFuture title

   You write testable client-side code, support usability testing and use security tools to deal with vulnerabilities. You join discussions with stakeholders about user needs.

3. Senior front end developer

   Senior · SkillsFuture title

   You own the front end design of a product, guide others on technical options and weigh security, stability and performance. You choose security tools and tackle larger vulnerabilities.

4. Lead front end engineer

   Lead

   You set front end standards across teams, plan work with product and design leads and coach other developers. Some leads move into engineering management.

Steps marked "SkillsFuture title" follow the career pathway in the SkillsFuture Skills Framework. The others are titles commonly used in Singapore.

Related jobs and their pay

Back to top

Frontend developer interview questions

We wrote these questions from the skills this job needs. They are not an official question bank.

1. Explain the JavaScript event loop. In what order will a setTimeout of zero, a resolved promise and a plain console log run?

   What a good answer covers

   • States that synchronous code runs first on the call stack.
   • Explains that promise callbacks go to the microtask queue and run before timer callbacks.
   • Explains that setTimeout callbacks go to the task queue, even with a zero delay.
   • Gives the correct order: log, promise, then timeout.
   • Mentions that long synchronous work blocks rendering.

2. When would you choose CSS Grid over Flexbox, and how would you build a card layout that works from phone to desktop?

   What a good answer covers

   • Describes Flexbox as one-dimensional and Grid as two-dimensional.
   • Uses Grid for page or card-grid layouts and Flexbox for rows of items like toolbars.
   • Builds mobile first and adds breakpoints or fluid sizing with minmax and auto-fit.
   • Uses relative units and avoids fixed widths.
   • Tests on real devices or browser tools.

3. A React component re-renders more often than expected and the page feels slow. How do you find the cause and fix it?

   What a good answer covers

   • Uses React DevTools Profiler to see which components render and why.
   • Checks for new object or function props created on every render.
   • Applies memoisation where measurement shows a benefit.
   • Moves state closer to where it is used or splits components.
   • Considers list virtualisation for long lists.

4. Explain the difference between server-side rendering, static generation and client-side rendering in Next.js. How do you pick one for a page?

   What a good answer covers

   • Defines each approach and where the HTML is produced.
   • Matches static generation to content that rarely changes.
   • Matches server rendering to personalised or fresh data.
   • Notes the effect on first load, search visibility and server cost.
   • Mentions caching and revalidation.

5. How does TypeScript help on a large front end codebase? Explain the difference between any and unknown, and give a use for generics.

   What a good answer covers

   • Says types catch errors at build time and help editors and refactoring.
   • Explains that any turns off checking while unknown forces a check before use.
   • Gives a practical generic example, such as a typed API response or reusable list component.
   • Mentions typing API data and validating it at runtime.

6. How would you build a custom dropdown menu that people using only a keyboard or a screen reader can use?

   What a good answer covers

   • Starts with a native select or button and builds custom only if needed.
   • Uses correct roles, labels and ARIA states, and keeps them in sync.
   • Supports Tab, arrow keys, Enter, Space and Escape.
   • Manages focus when the menu opens and closes.
   • Checks colour contrast and tests with a screen reader.

7. A marketing landing page scores poorly on mobile for loading speed. How do you diagnose it and what do you change?

   What a good answer covers

   • Measures first with Lighthouse and real-user data, looking at Core Web Vitals.
   • Checks image size and format, and uses lazy loading.
   • Reduces JavaScript bundle size through code splitting and removing unused libraries.
   • Audits third-party scripts such as tags and chat widgets.
   • Sets a performance budget to stop speed slipping again.

8. What do you cover with unit tests, component tests and end-to-end tests? How do you deal with flaky Cypress or Playwright tests?

   What a good answer covers

   • Uses unit tests for logic and component tests for behaviour.
   • Keeps end-to-end tests for key user journeys such as login and checkout.
   • Finds the cause of flakiness: timing, shared data or unstable selectors.
   • Uses built-in waiting and stable test IDs instead of fixed delays.
   • Runs tests in CI and tracks failures.

1. A release goes live and customers report that the payment button does nothing on one browser. What do you do in the first hour?

   What a good answer covers

   • Confirms the issue and checks error logs and monitoring.
   • Tells the team and product owner and agrees whether to roll back.
   • Uses Git to find the change and revert or hotfix it.
   • Adds a test that would have caught the defect.
   • Writes a short review of the cause afterwards.

2. Three product teams each build their own buttons and forms. You are asked to introduce a shared design system. How do you start?

   What a good answer covers

   • Audits existing components to find duplicates and gaps.
   • Starts with a few high-use components instead of everything.
   • Agrees tokens for colour, spacing and type with designers.
   • Documents usage and builds accessibility into each component.
   • Sets up versioning and a way for teams to request changes.

3. You used Copilot or Cursor to write a form component and it passes review, but a tester finds it breaks with empty input. What do you do, and how do you change your habits?

   What a good answer covers

   • Fixes the defect and adds a test for empty and invalid input.
   • Accepts responsibility for code, whoever or whatever wrote it.
   • Reads generated code line by line and keeps secrets and client data out of prompts.
   • Gives the tool clear constraints and examples in future prompts.
   • Follows the team's rules on using AI tools.

1. Tell us about a time you disagreed with a designer or product manager over how something should work. How did it end?

   What a good answer covers

   • Describes the disagreement briefly and specifically.
   • Shows that the developer listened to the other view.
   • Used evidence such as user feedback, a prototype or a performance measure.
   • Reached a decision the team could support.
   • Names what was learned.

2. Describe a time you had to cut scope to meet a deadline. How did you decide what to drop?

   What a good answer covers

   • Explains the deadline and what was at risk.
   • Ranked work by user value and risk with the product owner.
   • Communicated the trade-off early and in writing.
   • Kept quality checks such as testing and accessibility on the essential work.
   • Notes what was scheduled for later.

1. Your company wants to add analytics and advertising scripts to a website that collects visitors' names and email addresses. What do you raise from a Personal Data Protection Act (PDPA) point of view?

   What a good answer covers

   • Says personal data should be collected and used only for stated purposes with proper consent or another valid basis.
   • Asks which scripts send personal data to third parties.
   • Suggests a clear consent notice and a way to withdraw consent.
   • Recommends involving the data protection officer or legal team.
   • Keeps the answer general and leaves legal advice to the legal team.

2. You are building a government-style service for residents of all ages. Many use older phones, and the service must support English, Chinese, Malay and Tamil. How do you design and test it?

   What a good answer covers

   • Plans for text expansion and different scripts in layouts and fonts.
   • Keeps the interface simple, with large touch targets and readable contrast.
   • Tests on low-end devices and slower mobile connections.
   • Works with accessibility guidelines such as WCAG.
   • Uses plain language and gets feedback from real users.

Common questions about a frontend developer job

Sources