Frontend Development Certificate — Questions and Answers

Question 1: In Angular, what is a service used for?

Configuring routing
Defining the HTML template
Styling component UI
Sharing data and business logic across multiple components (Correct answer)

Correct answer: Sharing data and business logic across multiple components

Angular services are singleton classes used to share data, logic, and functionality across components via dependency injection.

Question 2: Where exactly should a reference to an external style sheet be made in an HTML document?

In the footer section
At the end of the document
In the head section (Correct answer)
In the body section

Correct answer: In the head section

External stylesheets are linked to an HTML document using the `<link>` tag, which must always be placed within the `<head>` section of the HTML document. Placing it here ensures that the browser loads and applies the styles before rendering the page content. This prevents a 'flash of unstyled content' and ensures the page displays correctly from the start.

Question 3: A canary deployment releases a new front-end version to 5% of users before a full rollout. This strategy is an example of:

Risk reduction through staged rollout (Correct answer)
Risk transfer to early adopters
Risk avoidance
Risk acceptance with no mitigation

Correct answer: Risk reduction through staged rollout

Staged rollout limits blast radius—if the new version has defects, only a small fraction of users are affected before you can halt or fix.

Question 4: Which accessibility testing tool can be integrated directly into Jest to catch WCAG violations during unit tests?

WAVE browser extension
Pa11y CLI
Lighthouse CI
axe-core via jest-axe (Correct answer)

Correct answer: axe-core via jest-axe

jest-axe wraps axe-core so you can assert `expect(await axe(container)).toHaveNoViolations()` in unit tests.

Question 5: What is the purpose of browser caching in web performance?

To encrypt user data
To compress server responses
To block third-party scripts
To store copies of resources locally so repeat visits load faster (Correct answer)

Correct answer: To store copies of resources locally so repeat visits load faster

Browser caching stores previously downloaded resources locally, so repeat page visits can load assets from the local cache instead of re-downloading them.

Question 6: Which JavaScript array method would you use to transform each element and return a new array of the same length?

forEach()
map() (Correct answer)
filter()
reduce()

Correct answer: map()

Array.prototype.map() calls a function on each element and returns a new array of the same length with the transformed values.

Question 7: A client wants a feature that conflicts with established accessibility standards. What should a front-end developer do?

Explain the legal and UX risks, propose an accessible alternative that meets the client's goal (Correct answer)
Refuse the request without explanation
Log a bug ticket and move on
Build it as requested since the client has final authority

Correct answer: Explain the legal and UX risks, propose an accessible alternative that meets the client's goal

Educating clients about accessibility risks while offering alternatives fulfills both professional duty and client goals.

Question 8: What is the purpose of minifying CSS and JavaScript files?

To reduce file size by removing whitespace and unnecessary characters (Correct answer)
To add comments for documentation
To convert code to a different language
To encrypt code for security

Correct answer: To reduce file size by removing whitespace and unnecessary characters

Minification removes whitespace, comments, and redundant code to reduce file sizes, resulting in faster download times.

Question 9: How should Front End Development professionals evaluate new technology tools?

Avoid all new technology
Assess functionality, reliability, security, cost-effectiveness, and alignment with professional needs (Correct answer)
Adopt all new technology immediately
Wait until competitors adopt first

Correct answer: Assess functionality, reliability, security, cost-effectiveness, and alignment with professional needs

This is fundamental to Front End Development practice. Assess functionality, reliability, security, cost-effectiveness, and alignment with professional needs represents the professional standard for technology in the Front End Development certification framework.

Question 10: What does 'First Contentful Paint' (FCP) measure in web performance?

Total blocking time of scripts
Time until the largest element is visible
Time until the first text or image is painted on screen (Correct answer)
Time until the page is fully interactive

Correct answer: Time until the first text or image is painted on screen

FCP measures the time from page navigation start until the browser renders the first piece of DOM content (text, image, or canvas).

Question 11: What is tree shaking in the context of JavaScript bundlers?

Converting CommonJS to ESM
Removing unused code from the final bundle (Correct answer)
Splitting code into multiple files
Animating DOM elements

Correct answer: Removing unused code from the final bundle

Tree shaking statically analyzes import/export statements and eliminates dead (unused) code from the final JavaScript bundle.

Question 12: What does a risk register typically document for each identified risk?

Description, probability, impact, mitigation plan, owner, and status (Correct answer)
Only the risk description and owner
A list of all past incidents sorted by severity
The financial budget allocated to resolving risks

Correct answer: Description, probability, impact, mitigation plan, owner, and status

A complete risk register captures probability, impact, mitigation actions, ownership, and current status so nothing is left untracked.

Question 13: In risk management, 'residual risk' refers to:

The remaining risk after mitigation controls have been applied (Correct answer)
Newly discovered risks that arise after a project starts
Risks transferred to a third-party vendor
Risks that have been fully eliminated

Correct answer: The remaining risk after mitigation controls have been applied

No mitigation is perfect; residual risk is whatever exposure remains after controls are in place and must be accepted or further reduced.

Question 14: What is the benefit of interdisciplinary collaboration in Front End Development practice?

It creates confusion
It slows down decision making
It brings diverse expertise and perspectives that improve outcomes and innovation (Correct answer)
It is only for complex projects

Correct answer: It brings diverse expertise and perspectives that improve outcomes and innovation

This is fundamental to Front End Development practice. It brings diverse expertise and perspectives that improve outcomes and innovation represents the professional standard for practical in the Front End Development certification framework.

Question 15: What is the primary benefit of using CSS sprites?

Combines multiple images into one to reduce HTTP requests (Correct answer)
Enables responsive images
Converts images to vector format
Adds 3D effects to images

Correct answer: Combines multiple images into one to reduce HTTP requests

CSS sprites combine multiple small images into a single image file, reducing the number of HTTP requests and improving page load speed.

Question 16: What is the primary purpose of a CDN (Content Delivery Network) in web applications?

Encrypt data between client and server
Serve assets from geographically closer servers to reduce latency (Correct answer)
Compress JavaScript bundles before deployment
Manage DNS records for domains

Correct answer: Serve assets from geographically closer servers to reduce latency

A CDN distributes static assets across edge servers worldwide so users download files from the nearest server, reducing latency.

Question 17: Which of the following is NOT a valid way to declare a variable in modern JavaScript?

var
let
const
def (Correct answer)

Correct answer: def

JavaScript uses let, const, and var for variable declarations; `def` is not a JavaScript keyword (it's used in Python).

Question 18: Which browser security header directly mitigates the risk of clickjacking attacks on a front-end application?

Cache-Control
Accept-Encoding
Strict-Transport-Security (HSTS)
X-Frame-Options (Correct answer)

Correct answer: X-Frame-Options

X-Frame-Options (or the frame-ancestors CSP directive) prevents your pages from being embedded in malicious iframes used for clickjacking.

Question 19: What does the 'defer' attribute on a <script> tag do differently from 'async'?

Executes the script after HTML parsing is complete, in order (Correct answer)
Enables module syntax
Blocks HTML parsing until complete
Downloads the script faster

Correct answer: Executes the script after HTML parsing is complete, in order

Unlike async, the defer attribute guarantees scripts execute after the HTML document is fully parsed and in the order they appear.

Question 20: How does a Front End Development professional communicate risks to stakeholders?

Through annual reports only
By minimizing all risks
Using technical jargon only
By presenting risks clearly with context, potential impacts, and recommended actions (Correct answer)

Correct answer: By presenting risks clearly with context, potential impacts, and recommended actions

This is fundamental to Front End Development practice. By presenting risks clearly with context, potential impacts, and recommended actions represents the professional standard for risk management in the Front End Development certification framework.

Question 21: Which technique allows a team to test a new feature with a subset of real users before full rollout, reducing QA risk?

Blue-green deployment with snapshot rollback
Shadow DOM isolation
Feature flags (feature toggles) enabling gradual rollout to a percentage of users (Correct answer)
A/B testing with synthetic data

Correct answer: Feature flags (feature toggles) enabling gradual rollout to a percentage of users

Feature flags let teams enable a feature for a controlled percentage of real users, limiting exposure while validating behavior in production.

Question 22: Which artifact is most effective for aligning stakeholders on UI behavior before development begins?

A verbal description in a meeting
A finished codebase
A post-launch retrospective report
An interactive prototype (Correct answer)

Correct answer: An interactive prototype

Interactive prototypes let stakeholders experience proposed behavior and give concrete feedback before costly development starts.

Question 23: A risk is rated HIGH probability but LOW impact. What is typically the recommended response?

Monitor it regularly but avoid spending major resources on mitigation (Correct answer)
Transfer the risk to a third party via insurance
Escalate immediately and halt the project
Accept the risk with no action since impact is low

Correct answer: Monitor it regularly but avoid spending major resources on mitigation

High-probability, low-impact risks warrant monitoring and lightweight controls rather than costly mitigation efforts.

Question 24: In JavaScript, what is the output of `typeof null`?

"boolean"
"undefined"
"object" (Correct answer)
"null"

Correct answer: "object"

typeof null returns "object" due to a historical bug in JavaScript's type system that was never fixed for backward compatibility.

Question 25: What is JSX in React?

A testing framework
A state management library
A CSS preprocessor
A JavaScript XML syntax extension that allows HTML-like code in JavaScript (Correct answer)

Correct answer: A JavaScript XML syntax extension that allows HTML-like code in JavaScript

JSX is a syntax extension for JavaScript that lets developers write HTML-like markup directly within JavaScript files, compiled by Babel.

Question 26: A component library's Button has 12 variants. During testing, the team discovers that adding a new variant breaks 3 existing snapshot tests. The best long-term testing strategy for UI components is:

Lock the number of variants at 12 permanently
Delete snapshot tests and rely only on unit tests
Generate snapshots only in production builds
Use visual regression testing (e.g., Storybook + Chromatic) alongside interaction tests, and update snapshots intentionally (Correct answer)

Correct answer: Use visual regression testing (e.g., Storybook + Chromatic) alongside interaction tests, and update snapshots intentionally

Visual regression tools capture intentional visual changes as approved baselines, preventing unintended regressions while allowing the component to evolve.

Question 27: A designer and developer disagree on implementing a hover effect that may hurt performance. What is the best path forward?

Escalate immediately to a manager
The developer overrides the designer since performance is their domain
Run a quick performance test, share data, and collaboratively decide based on impact (Correct answer)
The designer's vision always takes precedence

Correct answer: Run a quick performance test, share data, and collaboratively decide based on impact

Data-driven discussion respects both roles and leads to solutions that balance aesthetics and performance.

Question 28: What does 'trunk-based development' promote in a professional front-end team context?

Developing exclusively on the main branch with no branching
Storing all code in a single monolithic file
Long-lived feature branches merged quarterly
Short-lived branches merged frequently to the main branch to reduce integration risk (Correct answer)

Correct answer: Short-lived branches merged frequently to the main branch to reduce integration risk

Frequent small merges reduce merge conflicts and keep the main branch releasable at any time.

Question 29: What does CSS specificity determine when multiple rules target the same element?

The speed at which the browser parses the stylesheet
Which CSS rule takes precedence when conflicting rules exist (Correct answer)
The maximum number of CSS rules allowed per element
The order in which CSS files are loaded by the browser

Correct answer: Which CSS rule takes precedence when conflicting rules exist

CSS specificity is the algorithm that determines which rule wins when multiple conflicting rules target the same element, calculated based on selector types (ID, class, element).

Question 30: Actions can be carried out using javascript to change, add, or remove nodes from a document or to get/set properties for them.

Clients
Methods (Correct answer)
Servers
Properties

Correct answer: Methods

In JavaScript and the Document Object Model (DOM), 'methods' are actions or functions that can be performed on an object or node. These methods allow developers to programmatically manipulate the document structure, such as adding, removing, or changing nodes, as well as getting or setting their properties. They are essentially the behaviors an object can execute to interact with the document.

Frontend Development Certificate

Validates professional competency in front-end web development covering core web technologies (HTML, CSS, JavaScript), modern frameworks, performance optimization, and professional practices. Tests both technical skills and industry knowledge for working front-end developers.

Questions

35 min

Time Limit

75%

To Pass

Checking for saved progress...

Exam Rules

You can skip questions and return to them later
Flag questions for review before submitting
No feedback shown until you submit the entire exam
Unanswered questions count as wrong — answer everything
10 pretest questions are mixed in and don't affect your score
Timer auto-submits when time runs out
Your progress is auto-saved every 30 seconds