Frontend Development Certificate — Questions and Answers

Question 1: CCPA requires a 'Do Not Sell My Personal Information' link for businesses that meet which threshold?

Any business with a California domain
More than 50 employees
Annual gross revenue over $25 million OR data on 100,000+ consumers (Correct answer)
Revenue over $1 million from California residents

Correct answer: Annual gross revenue over $25 million OR data on 100,000+ consumers

CCPA applies to for-profit businesses meeting at least one of three thresholds: $25M+ revenue, data on 100,000+ consumers/households, or 50%+ revenue from selling personal data.

Question 2: What is code splitting in front-end development?

Dividing a JavaScript bundle into smaller chunks loaded on demand (Correct answer)
Writing CSS and JavaScript in separate files
Separating development and production code
Using different frameworks for different pages

Correct answer: Dividing a JavaScript bundle into smaller chunks loaded on demand

Code splitting breaks a large JavaScript bundle into smaller chunks that are loaded only when needed, reducing initial page load time.

Question 3: A third-party npm package your front-end relies on is found to have a critical XSS vulnerability. What is the FIRST action you should take?

Pin the package to the vulnerable version to avoid breaking changes
Disable all script execution in the browser
Remove the package entirely regardless of impact
Check if a patched version exists and upgrade immediately (Correct answer)

Correct answer: Check if a patched version exists and upgrade immediately

Upgrading to a patched release is the fastest way to close the known vulnerability while preserving functionality.

Question 4: A product team learns that browser vendor X will drop support for a CSS feature your app relies on in 6 months. This is an example of which risk category?

Financial risk
Obsolescence / technology risk (Correct answer)
Compliance risk
Operational risk

Correct answer: Obsolescence / technology risk

Technology obsolescence risk arises when a platform or feature you depend on is deprecated or removed by its maintainer.

Question 5: Which state management library is most associated with Vue.js applications?

MobX
Redux
Pinia (Correct answer)
Zustand

Correct answer: Pinia

Pinia is the official, recommended state management library for Vue 3, replacing Vuex as the standard choice for Vue applications.

Question 6: Which meta tag prevents browsers from performing MIME type sniffing, reducing certain injection risks?

<meta name='robots' content='nosniff'>
<meta charset='nosniff'>
X-Content-Type-Options: nosniff (response header) (Correct answer)
<meta http-equiv='Content-Type'>

Correct answer: X-Content-Type-Options: nosniff (response header)

The `X-Content-Type-Options: nosniff` response header instructs browsers to follow the declared MIME type and not to guess based on content.

Question 7: What does 'lazy loading' mean in the context of web performance?

Compressing JavaScript files
Caching files in the browser
Loading all resources at page startup
Deferring the loading of off-screen resources until they are needed (Correct answer)

Correct answer: Deferring the loading of off-screen resources until they are needed

Lazy loading defers the loading of non-critical resources (like below-the-fold images) until they are about to enter the viewport.

Question 8: What is a primary benefit of involving front-end developers in early design reviews?

It replaces the need for a QA phase
It gives developers creative control over the product vision
Developers can flag technically infeasible designs before significant design effort is invested (Correct answer)
It eliminates the need for prototypes

Correct answer: Developers can flag technically infeasible designs before significant design effort is invested

Early developer input prevents costly design rework by surfacing implementation constraints before designs are finalized.

Question 9: What is 'contract testing' in a micro-frontend or API-driven front-end architecture?

Enforcing TypeScript interfaces at runtime
Testing all front-end components against every API version simultaneously
Legal agreements between teams about code ownership
Verifying that the API responses match the shape the front end expects, independent of the real API (Correct answer)

Correct answer: Verifying that the API responses match the shape the front end expects, independent of the real API

Contract testing (e.g., Pact) validates that provider API responses conform to the consumer's expectations without requiring both systems to be live simultaneously.

Question 10: How do Front End Development professionals evaluate research quality?

By publication date only
By the reputation of the author only
Research quality cannot be evaluated
By assessing methodology, sample size, peer review status, and relevance to practice (Correct answer)

Correct answer: By assessing methodology, sample size, peer review status, and relevance to practice

This is fundamental to Front End Development practice. By assessing methodology, sample size, peer review status, and relevance to practice represents the professional standard for research in the Front End Development certification framework.

Question 11: A user reports that a date picker component is unusable with a keyboard. After pressing Tab to focus the input, arrow keys do nothing. The root cause is most likely:

The input has type='text' instead of type='date'
Arrow key events are not handled; the component only responds to mouse click events (Correct answer)
The component is inside a form element
The date picker uses absolute positioning

Correct answer: Arrow key events are not handled; the component only responds to mouse click events

Custom interactive widgets must implement keyboard event handlers for Arrow, Enter, Escape, and Tab to be keyboard-operable per WCAG 2.1.1.

Question 12: In front-end performance QA, what does 'Time to Interactive (TTI)' measure?

The time until the page is fully interactive and reliably responds to user input (Correct answer)
The time until the first byte arrives from the server
The time until all images are loaded
The total JavaScript execution time

Correct answer: The time until the page is fully interactive and reliably responds to user input

TTI marks when the main thread is quiet enough and all critical scripts are loaded so the page can respond consistently to user interactions.

Question 13: Which technique reduces the number of HTTP requests by combining multiple CSS files into one?

Minification
Tree shaking
Transpiling
Bundling/concatenation (Correct answer)

Correct answer: Bundling/concatenation

Bundling (concatenation) merges multiple CSS or JS files into a single file, reducing the number of HTTP requests the browser needs to make.

Question 14: Which technique allows a webpage to load JavaScript only when it's needed, reducing initial load time?

Minification
Code splitting and lazy loading (Correct answer)
Tree shaking
Gzip compression

Correct answer: Code splitting and lazy loading

Code splitting breaks a bundle into smaller chunks that can be lazy loaded on demand (e.g., when a user navigates to a specific route), reducing the initial JavaScript payload.

Question 15: In Angular, what decorator is used to define a component?

@Component (Correct answer)
@NgModule
@Directive
@Injectable

Correct answer: @Component

The @Component decorator marks a class as an Angular component and provides metadata like its template, styles, and selector.

Question 16: Which image format offers the best compression for photographs on modern web browsers?

TIFF
BMP
GIF
WebP (Correct answer)

Correct answer: WebP

WebP provides superior lossless and lossy compression for photos compared to JPEG and PNG, reducing file sizes significantly.

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

Styling component UI
Defining the HTML template
Configuring routing
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 18: In UX research, what distinguishes 'formative' research from 'summative' research?

Formative uses surveys; summative uses interviews
Formative is qualitative; summative is always quantitative
Formative tests back-end APIs; summative tests front-end UI
Formative informs design decisions during development; summative evaluates a finished product against benchmarks (Correct answer)

Correct answer: Formative informs design decisions during development; summative evaluates a finished product against benchmarks

Formative research shapes the design process (e.g., early usability tests), while summative research measures the outcome of a completed design against defined success metrics.

Question 19: How do Front End Development professionals transfer knowledge from training to practice?

By passing the certification exam only
Training and practice are unrelated
Knowledge transfers automatically
Through supervised practice, mentoring, gradual independence, and ongoing feedback (Correct answer)

Correct answer: Through supervised practice, mentoring, gradual independence, and ongoing feedback

This is fundamental to Front End Development practice. Through supervised practice, mentoring, gradual independence, and ongoing feedback represents the professional standard for practical in the Front End Development certification framework.

Question 20: What does 'Largest Contentful Paint' (LCP) measure and what is the 'good' threshold per Google?

Time for JavaScript execution; under 5 seconds
Time for the DOM to be fully parsed; under 1 second
Time for the largest visible content element to render; under 2.5 seconds (Correct answer)
Time for all images to load; under 3 seconds

Correct answer: Time for the largest visible content element to render; under 2.5 seconds

LCP measures when the largest content element (image, video, or text block) becomes visible; Google considers under 2.5 seconds 'good' for Core Web Vitals.

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

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

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 22: What is 'hydration' in the context of server-side rendering (SSR) frameworks like Next.js?

Caching rendered HTML pages on a CDN edge node
Converting JSX templates into static HTML on the server
Fetching initial data from the server before rendering the component tree
The process of attaching client-side JavaScript event handlers to server-rendered HTML (Correct answer)

Correct answer: The process of attaching client-side JavaScript event handlers to server-rendered HTML

Hydration makes server-rendered static HTML interactive by having the client-side JavaScript framework attach event listeners and take over rendering.

Question 23: A client requests weekly email status updates on front-end progress. What should those updates typically include?

A full technical changelog with code diffs
Only a list of closed tickets by ID
Marketing copy about the product benefits
Completed items, in-progress work, upcoming milestones, and any risks or blockers (Correct answer)

Correct answer: Completed items, in-progress work, upcoming milestones, and any risks or blockers

Status updates should give stakeholders a clear picture of progress, upcoming work, and risks without requiring them to interpret raw technical data.

Question 24: Under ADA Title III as applied to websites, which standard do US courts most frequently reference for compliance?

ISO 9241-171
Section 508 VPAT
EN 301 549
WCAG 2.1 Level AA (Correct answer)

Correct answer: WCAG 2.1 Level AA

US courts and the DOJ consistently reference WCAG 2.1 Level AA as the practical accessibility benchmark for Title III ADA web compliance.

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

Time until the largest element is visible
Total blocking time of scripts
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 26: A multilingual SaaS app must support Arabic (RTL) and English (LTR). A developer hard-codes margin-left: 24px for a sidebar. What is the correct fix for RTL support?

Use position: absolute to place the sidebar
Detect the language in JavaScript and toggle a CSS class
Add a separate Arabic stylesheet
Use CSS logical properties (margin-inline-start: 24px) which automatically flip in RTL contexts (Correct answer)

Correct answer: Use CSS logical properties (margin-inline-start: 24px) which automatically flip in RTL contexts

CSS logical properties like margin-inline-start respect the document's writing direction, eliminating the need for per-language overrides.

Question 27: How should Front End Development professionals prioritize identified risks?

By cost to mitigate only
Randomly
Alphabetically
Based on likelihood of occurrence combined with severity of potential impact (Correct answer)

Correct answer: Based on likelihood of occurrence combined with severity of potential impact

This is fundamental to Front End Development practice. Based on likelihood of occurrence combined with severity of potential impact represents the professional standard for risk management in the Front End Development certification framework.

Question 28: A front-end team stores API keys directly in client-side JavaScript. Which risk does this MOST directly create?

Denial of service against the client browser
SQL injection in the database layer
Unauthorized access to backend services by anyone who inspects the source (Correct answer)
Cross-site request forgery (CSRF)

Correct answer: Unauthorized access to backend services by anyone who inspects the source

Client-side code is publicly visible, so any API key embedded in it can be extracted and misused by attackers.

Question 29: What is the purpose of React's useCallback hook?

Fetches data asynchronously
Memoizes a callback function to prevent unnecessary re-creation on re-renders (Correct answer)
Manages component lifecycle
Creates a reference to a DOM element

Correct answer: Memoizes a callback function to prevent unnecessary re-creation on re-renders

useCallback returns a memoized version of a callback that only changes if its dependencies change, preventing unnecessary child re-renders.

Question 30: What does 'prop drilling' refer to in React applications?

Passing props through multiple nested components just to reach a deeply nested child (Correct answer)
Optimizing component re-renders
Using custom HTML attributes
Destructuring props in functional components

Correct answer: Passing props through multiple nested components just to reach a deeply nested child

Prop drilling occurs when props must be passed through several intermediate components that don't need them, just to reach a deeply nested component.

Question 31: What does the HTML attribute 'loading="lazy"' on an <img> tag enable?

Preloads the image before page render
Converts the image to WebP
Defers loading the image until it's near the viewport (Correct answer)
Reduces image resolution

Correct answer: Defers loading the image until it's near the viewport

The loading='lazy' attribute tells the browser to defer loading an image until it's close to entering the viewport.

Question 32: When assessing risk severity, a 5×5 risk matrix plots risks based on which two dimensions?

Frequency and detectability
Scope and complexity
Probability and impact (Correct answer)
Cost and schedule

Correct answer: Probability and impact

A standard risk matrix rates each risk on likelihood of occurrence (probability) and severity of consequences (impact).

Question 33: What does the `srcset` attribute on an `<img>` element allow you to do?

Provide different image sources for different screen resolutions or sizes (Correct answer)
Lazy load images as the user scrolls
Set the image display dimensions independently of its file size
Define multiple fallback image formats (JPEG, PNG, WebP)

Correct answer: Provide different image sources for different screen resolutions or sizes

The srcset attribute lets you specify multiple image sources at different resolutions or widths so the browser can choose the most appropriate one for the device.

Question 34: What is a 'snapshot test' in the context of React component testing?

A test that mocks network snapshots
A visual screenshot comparison using Playwright
A test that serializes rendered output and compares it to a stored baseline (Correct answer)
A performance benchmark capturing render time

Correct answer: A test that serializes rendered output and compares it to a stored baseline

Snapshot tests serialize a component's rendered output to a file and fail if the output changes unexpectedly.

Question 35: Which tool would a front-end developer use to measure Core Web Vitals on a production site?

Webpack Bundle Analyzer
Google PageSpeed Insights (Correct answer)
npm audit
GitHub Actions

Correct answer: Google PageSpeed Insights

Google PageSpeed Insights reports real-world Core Web Vitals data (LCP, CLS, FID/INP) from the Chrome User Experience Report.

Question 36: During a sprint retrospective, the team identifies that unclear API contracts between front-end and back-end teams caused two production bugs. Which risk management action addresses the ROOT CAUSE?

Deploy more frequently to detect issues faster
Add more manual QA testers to the team
Increase the number of unit tests for front-end components
Establish a shared API contract using OpenAPI/Swagger with automated contract testing (Correct answer)

Correct answer: Establish a shared API contract using OpenAPI/Swagger with automated contract testing

Contract testing with a shared specification prevents front-end/back-end mismatches from reaching production by validating both sides against the same source of truth.

Question 37: What is the primary purpose of a robots.txt file in a web application?

Instructing web crawlers which pages or directories they should or should not crawl (Correct answer)
Specifying CORS policies for third-party integrations
Blocking bots from making API requests to the server
Defining rate limits for automated HTTP clients

Correct answer: Instructing web crawlers which pages or directories they should or should not crawl

The robots.txt file signals to compliant web crawlers which areas of a site to skip, helping manage crawl budget and preventing indexing of private pages.

Question 38: What is the primary purpose of a 'Definition of Done' agreed upon with stakeholders?

To replace design mockups
To create a shared understanding of when a feature is truly complete (Correct answer)
To assign blame when features ship late
To restrict developers from adding enhancements

Correct answer: To create a shared understanding of when a feature is truly complete

A Definition of Done eliminates ambiguity by giving both developers and stakeholders identical criteria for feature completion.

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

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

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 40: Which performance metric measures unexpected layout shifts experienced by users?

Cumulative Layout Shift (Correct answer)
First Input Delay
Time to First Byte
First Contentful Paint

Correct answer: Cumulative Layout Shift

Cumulative Layout Shift (CLS) measures the total amount of unexpected layout shifts that occur during a page's lifetime.

Question 41: Which CSS technique avoids layout reflow by using transform for animations instead of top/left?

Float-based layout
CSS transitions
GPU compositing via transform (Correct answer)
Absolute positioning

Correct answer: GPU compositing via transform

Using CSS transform promotes elements to their own compositor layer, avoiding costly layout reflow and paint operations.

Question 42: A news website wants to implement infinite scroll but is concerned about SEO. Which approach best balances UX and search engine discoverability?

Use hash-based URLs like /#page=2 for each batch
Render all articles server-side without pagination
Load all content at once and use CSS to hide older articles
Implement History API pushState with paginated URLs and rel=next link tags (Correct answer)

Correct answer: Implement History API pushState with paginated URLs and rel=next link tags

Using pushState to update the URL and adding rel=next signals allow search engines to crawl paginated content while users enjoy smooth scrolling.

Question 43: Which research method involves observing users as they complete tasks on a website without giving them guidance?

Card sorting
Unmoderated usability testing (Correct answer)
Moderated usability testing
Contextual inquiry

Correct answer: Unmoderated usability testing

Unmoderated usability testing has participants complete tasks independently without a researcher present, capturing natural behavior.

Question 44: What is the first step in risk assessment for Front End Development professionals?

Identifying potential hazards and vulnerabilities in the specific context (Correct answer)
Implementing controls immediately
Purchasing insurance
Delegating to others

Correct answer: Identifying potential hazards and vulnerabilities in the specific context

This is fundamental to Front End Development practice. Identifying potential hazards and vulnerabilities in the specific context represents the professional standard for risk management in the Front End Development certification framework.

Question 45: A team deploys a new feature but needs to roll it back immediately after finding a critical bug in production. Their CI/CD uses immutable Docker image tags. The fastest safe rollback is:

Revert the git commit and trigger a full rebuild
Hotfix the bug directly on the running container
Delete the broken deployment and redeploy from the main branch
Re-deploy the previously tagged Docker image without rebuilding (Correct answer)

Correct answer: Re-deploy the previously tagged Docker image without rebuilding

Immutable image tags mean the previous working image is still available; re-deploying it restores the known-good state in seconds without a rebuild.

Question 46: Your team is about to migrate from a legacy CSS framework to a new one across 200 components. The HIGHEST risk you should plan for is:

Team members needing to learn new syntax
Increased page load due to larger CSS file size
Slower build times during development
Visual regressions across components that break the UI for end users (Correct answer)

Correct answer: Visual regressions across components that break the UI for end users

Wide-scope CSS migrations frequently introduce subtle visual regressions that are hard to catch without screenshot-based regression testing.

Question 47: What does CORS stand for and what problem does it solve?

Cross-Origin Resource Sharing; controls which origins can access resources on a server (Correct answer)
Code Organization and Reuse System; manages module imports
Cascading Override Rule Set; resolves CSS conflicts
Content Object Rendering Standard; handles HTML parsing

Correct answer: Cross-Origin Resource Sharing; controls which origins can access resources on a server

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that uses HTTP headers to allow or restrict web pages from making requests to a different origin than the one that served the page.

Question 48: What is the virtual DOM in React?

A browser extension for debugging
A server-side rendering technique
A lightweight in-memory representation of the real DOM used to optimize updates (Correct answer)
A CSS-in-JS library

Correct answer: A lightweight in-memory representation of the real DOM used to optimize updates

React's virtual DOM is an in-memory object tree that React uses to diff against the real DOM and apply only the minimal necessary changes.

Question 49: Which technique helps identify front-end risks early by continuously integrating code changes and running automated tests?

Waterfall development
Big-bang integration
Manual regression testing only
Continuous Integration (CI) (Correct answer)

Correct answer: Continuous Integration (CI)

CI catches regressions and integration failures immediately after each commit, reducing the cost and risk of late-stage defects.

Question 50: What is the value of written documentation in Front End Development professional communication?

It replaces verbal communication
It is only for formal occasions
It is optional
It creates permanent records, ensures clarity, and provides legal protection (Correct answer)

Correct answer: It creates permanent records, ensures clarity, and provides legal protection

This is fundamental to Front End Development practice. It creates permanent records, ensures clarity, and provides legal protection represents the professional standard for communication in the Front End Development certification framework.

Question 51: What is the Critical Rendering Path in web performance?

The browser steps from receiving HTML/CSS/JS bytes to rendering pixels on screen (Correct answer)
The sequence of steps the server takes to generate HTML responses
The order in which JavaScript modules are imported and executed
The process of resolving DNS and establishing a TCP connection

Correct answer: The browser steps from receiving HTML/CSS/JS bytes to rendering pixels on screen

The Critical Rendering Path is the sequence of steps the browser performs — parse HTML, build DOM and CSSOM, construct render tree, layout, and paint — to display the first pixels.

Question 52: Which feature of HTTP/2 most directly improves page load performance compared to HTTP/1.1?

Encrypting all traffic with TLS by default
Multiplexing multiple requests over a single TCP connection simultaneously (Correct answer)
Supporting server push of resources before the client requests them
Compressing HTTP headers using the DEFLATE algorithm

Correct answer: Multiplexing multiple requests over a single TCP connection simultaneously

HTTP/2 multiplexing allows multiple requests and responses to interleave on one connection, eliminating the head-of-line blocking problem of HTTP/1.1.

Question 53: Which JavaScript method returns a new array containing elements that pass a test function?

reduce()
find()
filter() (Correct answer)
map()

Correct answer: filter()

The filter() method creates a new array with all elements for which the provided callback function returns true.

Question 54: What does the 'async' attribute on a <script> tag do?

Downloads the script asynchronously without blocking HTML parsing (Correct answer)
Executes the script before HTML parsing
Delays script execution until the page loads
Enables ES module syntax

Correct answer: Downloads the script asynchronously without blocking HTML parsing

The async attribute causes the script to download in parallel with HTML parsing and execute as soon as it's downloaded, without blocking.

Question 55: Subresource Integrity (SRI) checks on third-party script tags help mitigate which front-end risk?

Slow DNS resolution for external scripts
CORS errors when loading cross-origin resources
Render-blocking caused by synchronous scripts
Serving of a tampered or hijacked third-party file (Correct answer)

Correct answer: Serving of a tampered or hijacked third-party file

SRI hashes verify that the fetched file exactly matches the expected content, blocking execution if the CDN-hosted file has been compromised.

Question 56: Which attribute is required in every <img> tag for accessibility?

src
alt (Correct answer)
title
id

Correct answer: alt

The alt attribute provides alternative text for screen readers and when images fail to load, making it essential for accessibility.

Question 57: In Vue.js, which directive conditionally renders an element by toggling its display property?

v-for
v-show (Correct answer)
v-if
v-bind

Correct answer: v-show

v-show toggles an element's CSS display property without removing it from the DOM, unlike v-if which adds/removes the element entirely.

Question 58: A front-end developer discovers a security vulnerability in a third-party library the team uses. The best first step is to:

Remove the library immediately without telling anyone
Wait until the next scheduled release cycle to address it
Check if a patched version exists and open an internal ticket to upgrade (Correct answer)
Disable the feature that uses the library with no explanation

Correct answer: Check if a patched version exists and open an internal ticket to upgrade

Proactively checking for patches and creating a tracked ticket ensures the vulnerability is addressed through a controlled, documented process.

Question 59: A checkout page loses user form data when the user accidentally navigates back. Which browser API provides the best UX solution?

Disabling the browser's back button with history.pushState
The beforeunload event warning combined with sessionStorage auto-save on input events (Correct answer)
localStorage with a manual save button
IndexedDB for persistent storage

Correct answer: The beforeunload event warning combined with sessionStorage auto-save on input events

Auto-saving form state to sessionStorage and warning users via beforeunload prevents data loss while respecting browser navigation conventions.

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

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
Escalate immediately to a manager

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 61: Which version control practice is considered a professional standard on collaborative front-end projects?

Committing all changes directly to the main branch
Using feature branches with descriptive names and meaningful commit messages (Correct answer)
Pushing code only at the end of the day
Avoiding commits until the feature is 100% complete

Correct answer: Using feature branches with descriptive names and meaningful commit messages

Feature branches isolate work-in-progress and meaningful commits create a reviewable, reversible project history.

Question 62: A user reports that a form is confusing. What is the most appropriate first communication step?

Conduct a brief user interview or review session recordings to understand exactly where confusion occurs (Correct answer)
Assume you know the problem and fix it immediately
Ask the user to submit a formal bug report and close the ticket
Dismiss the feedback since the form passed QA

Correct answer: Conduct a brief user interview or review session recordings to understand exactly where confusion occurs

Understanding the specific source of confusion before implementing changes ensures the fix addresses the real problem.

Question 63: What does `jest.spyOn()` do differently from `jest.fn()`?

jest.spyOn only works with class methods; jest.fn works everywhere
jest.spyOn wraps an existing object method while preserving the original implementation by default; jest.fn creates a standalone mock (Correct answer)
They are identical in behavior
jest.spyOn creates a completely new function; jest.fn wraps an existing method

Correct answer: jest.spyOn wraps an existing object method while preserving the original implementation by default; jest.fn creates a standalone mock

jest.spyOn attaches a spy to an existing method, allowing you to track calls while optionally keeping or replacing the real implementation.

Question 64: A stakeholder says 'I'll know it when I see it' instead of providing clear UI requirements. The best technique to move forward is:

Ask them to write a formal specification first
Show multiple lo-fi wireframe options to converge on preferences quickly through visual comparison (Correct answer)
Begin coding immediately and iterate until they approve
Cancel the project due to unclear requirements

Correct answer: Show multiple lo-fi wireframe options to converge on preferences quickly through visual comparison

Concrete visual options help stakeholders who struggle to articulate preferences translate gut feelings into actionable decisions faster than written requirements.

Question 65: What is the difference between `==` and `===` in JavaScript?

=== is used for objects; == is for primitives
=== is faster but less accurate than ==
== performs type coercion before comparison; === checks value and type without coercion (Correct answer)
They are identical in behavior

Correct answer: == performs type coercion before comparison; === checks value and type without coercion

The == operator converts operands to the same type before comparing (loose equality), while === requires both value and type to match exactly (strict equality).

Question 66: A dependency audit using `npm audit` reports a HIGH-severity vulnerability in a package used only in devDependencies for local linting. What is the appropriate risk response?

Disable npm audit in CI to prevent false alerts
Assess that production users are not exposed, document it, and schedule a routine fix (Correct answer)
Immediately patch and redeploy to production
Remove all devDependencies from the project

Correct answer: Assess that production users are not exposed, document it, and schedule a routine fix

devDependencies are not shipped to users, so the production risk is negligible—document the finding and fix it in a non-emergency window.

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

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

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 68: Which storage mechanism stores data with no expiration date and persists even after the browser is closed?

Memory cache
localStorage (Correct answer)
sessionStorage
Cookies with no max-age

Correct answer: localStorage

localStorage persists data indefinitely across browser sessions until explicitly cleared, unlike sessionStorage which clears on tab close.

Question 69: What is the benefit of using a Content Delivery Network (CDN) for a US-based website?

It serves assets from geographically closer servers to reduce latency (Correct answer)
It generates sitemaps automatically
It provides a database backup
It compiles the source code

Correct answer: It serves assets from geographically closer servers to reduce latency

A CDN distributes content across multiple servers worldwide, serving files from the closest node to reduce latency and load times.

Question 70: When should a front-end developer raise a technical concern that could affect a project deadline?

As soon as the risk is identified, with clear explanation and options (Correct answer)
Only after the deadline has passed
Only in private, never in team meetings
Never, to avoid appearing incompetent

Correct answer: As soon as the risk is identified, with clear explanation and options

Early risk communication gives stakeholders time to adjust scope, timeline, or resources before impact becomes unavoidable.

Question 71: 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)
Blocks HTML parsing until complete
Enables module syntax
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.

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

70 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