Frontend Development Certificate — Questions and Answers

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

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

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 2: How should Front End Development professionals prioritize identified risks?

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

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 3: Which practice is most effective for identifying accessibility risks before a front-end release?

Performing load testing with simulated users
Running automated accessibility audits (e.g., axe) plus manual screen-reader testing (Correct answer)
Checking browser console for JavaScript errors
Reviewing only visual design mockups

Correct answer: Running automated accessibility audits (e.g., axe) plus manual screen-reader testing

Automated tools catch roughly 30–40% of issues, and manual testing with assistive technology covers the remainder of real-world accessibility risks.

Question 4: Which practice most effectively helps remote front-end teams stay aligned on UI standards over time?

Relying on each developer's judgment independently
Maintaining a living style guide with contribution guidelines accessible to all team members (Correct answer)
Restricting UI decisions to one designated developer
Holding daily three-hour design reviews

Correct answer: Maintaining a living style guide with contribution guidelines accessible to all team members

A living, accessible style guide creates a single source of truth that scales with the team without requiring constant synchronous meetings.

Question 5: What is the primary professional purpose of a post-mortem after a front-end production incident?

To assign blame to the developer who introduced the bug
To identify root causes and systemic improvements to prevent recurrence (Correct answer)
To create documentation for legal defense
To justify rolling back to an older technology stack

Correct answer: To identify root causes and systemic improvements to prevent recurrence

Blameless post-mortems focus on process improvements rather than individual fault, creating a safer learning culture.

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

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

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 7: What is a risk mitigation strategy in Front End Development practice?

Only addressing risks after they occur
Implementing controls that reduce the likelihood or impact of identified risks (Correct answer)
Ignoring low-probability risks
Transferring all responsibility

Correct answer: Implementing controls that reduce the likelihood or impact of identified risks

This is fundamental to Front End Development practice. Implementing controls that reduce the likelihood or impact of identified risks represents the professional standard for risk management in the Front End Development certification framework.

Question 8: A single-page application stores the user's JWT in localStorage. What is the PRIMARY security risk?

The token cannot be sent with CORS requests
The JWT will expire too quickly
Any XSS attack can read and exfiltrate the token (Correct answer)
LocalStorage is cleared on every browser restart

Correct answer: Any XSS attack can read and exfiltrate the token

localStorage is accessible via JavaScript, so a successful XSS attack can steal the token and hijack the user's session.

Question 9: How do Front End Development professionals ensure compliance in daily practice?

Compliance is checked only annually
By hiring a compliance officer
By memorizing all regulations
By integrating compliance requirements into standard operating procedures and regular audits (Correct answer)

Correct answer: By integrating compliance requirements into standard operating procedures and regular audits

This is fundamental to Front End Development practice. By integrating compliance requirements into standard operating procedures and regular audits represents the professional standard for regulatory in the Front End Development certification framework.

Question 10: A developer uses `React Testing Library`'s `userEvent.type()` instead of `fireEvent.change()`. What is the advantage?

It is synchronous and faster
It skips React's synthetic event system
It bypasses component lifecycle hooks
It simulates real user interactions including keydown, keypress, and keyup events (Correct answer)

Correct answer: It simulates real user interactions including keydown, keypress, and keyup events

userEvent.type() fires the full sequence of keyboard events a real user would generate, making tests more realistic.

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

Using technical jargon only
By minimizing all risks
Through annual reports 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 12: What is the purpose of browser caching in web performance?

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

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 13: Which metric best quantifies the potential financial impact of a risk event when performing a quantitative risk assessment?

Risk velocity
Risk appetite
Expected Monetary Value (EMV) (Correct answer)
Risk probability

Correct answer: Expected Monetary Value (EMV)

EMV multiplies the probability of a risk by its monetary impact to produce a single comparable figure.

Question 14: A junior developer on the team is producing code that doesn't match the agreed style guide. The best first step is to:

Fix their code silently without informing them
Escalate to a manager immediately
Have a private, constructive conversation referencing the style guide and offer to pair program on the next task (Correct answer)
Post a public critique in the team channel

Correct answer: Have a private, constructive conversation referencing the style guide and offer to pair program on the next task

Private, constructive feedback with mentorship fosters growth and maintains team cohesion without creating public embarrassment.

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

Risks transferred to a third-party vendor
The remaining risk after mitigation controls have been applied (Correct answer)
Newly discovered risks that arise after a project starts
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 16: What is the purpose of React's useCallback hook?

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

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 17: Which image format offers the best compression for photographs on modern web browsers?

TIFF
GIF
WebP (Correct answer)
BMP

Correct answer: WebP

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

Question 18: What is the primary competency framework for Front End Development professionals?

Self-assessed capabilities only
Structured competency standards defined by the certifying body (Correct answer)
Employer-specific requirements only
Ad-hoc skill development

Correct answer: Structured competency standards defined by the certifying body

This is fundamental to Front End Development practice. Structured competency standards defined by the certifying body represents the professional standard for professional standards in the Front End Development certification framework.

Question 19: In HTML, which input type renders a date picker in modern browsers?

type='picker'
type='calendar'
type='datetime'
type='date' (Correct answer)

Correct answer: type='date'

The input type='date' attribute causes modern browsers to render a native date picker control.

Question 20: Which HTTP status code indicates a resource has been permanently moved?

301 (Correct answer)
307
304
302

Correct answer: 301

301 Moved Permanently tells the client and search engines that the resource has permanently moved to a new URL.

Question 21: Which metric is most directly relevant when evaluating a front-end developer's impact on user experience?

Lines of code written per day
CSS file size in kilobytes
Core Web Vitals scores such as LCP and CLS (Correct answer)
Number of Git commits

Correct answer: Core Web Vitals scores such as LCP and CLS

Core Web Vitals measure real-world performance and visual stability, directly reflecting the user experience a developer ships.

Question 22: 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:

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)
Team members needing to learn new syntax

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 23: Technical debt in a front-end codebase is best classified as which type of risk?

Strategic risk
Internal operational risk (Correct answer)
External risk
Compliance risk

Correct answer: Internal operational risk

Technical debt is an internally generated risk that increases the probability of defects, slower delivery, and system failure over time.

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

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

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 25: In Vue 3, what replaces the Options API for organizing component logic?

Directive API
Template API
Mixin API
Composition API (Correct answer)

Correct answer: Composition API

Vue 3's Composition API uses setup() and composable functions to organize component logic by feature rather than option type.

Question 26: Which browser developer tool metric measures the time until the largest visible content element is rendered?

Cumulative Layout Shift
First Contentful Paint
Time to Interactive
Largest Contentful Paint (Correct answer)

Correct answer: Largest Contentful Paint

Largest Contentful Paint (LCP) measures when the largest image or text block is rendered within the viewport, a key Core Web Vital.

Question 27: A developer needs to display a live-updating stock ticker without polling. The server supports SSE and WebSockets. Which should they choose and why?

WebSockets, because they use less bandwidth
GraphQL subscriptions, because they auto-reconnect
Long polling, because it is the most widely supported
Server-Sent Events (SSE), because it is unidirectional server-to-client, works over standard HTTP/2, and is simpler for one-way data streams (Correct answer)

Correct answer: Server-Sent Events (SSE), because it is unidirectional server-to-client, works over standard HTTP/2, and is simpler for one-way data streams

SSE is ideal for one-way server-push scenarios like tickers; it reconnects automatically, works over HTTP/2, and avoids the overhead of bidirectional WebSocket protocol.

Question 28: When writing a technical specification document for a new front-end feature, what audience should primarily drive its level of detail?

External users reading release notes
The people who will build, review, and test the feature (Correct answer)
The CEO who signs off on the roadmap
The marketing team writing launch copy

Correct answer: The people who will build, review, and test the feature

Specs are working documents for implementers and reviewers, so their detail level should serve those who need to act on them.

Question 29: What does the browser's 'same-origin policy' restrict?

Scripts on one origin accessing resources from a different origin (Correct answer)
Images being displayed from third-party hosts
HTML forms submitting to any URL
CSS files loading fonts from external CDNs

Correct answer: Scripts on one origin accessing resources from a different origin

The same-origin policy prevents scripts from one origin (scheme+host+port) from reading resources from a different origin without explicit CORS permission.

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

Zustand
Pinia (Correct answer)
MobX
Redux

Correct answer: Pinia

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

Question 31: An analytics dashboard fetches a large dataset and transforms it on the main thread, causing 2-second UI freezes. The best architectural solution is:

Offload the computation to a Web Worker so the main thread remains responsive (Correct answer)
Increase the JavaScript heap size limit
Use setTimeout to break the work into chunks
Compress the dataset before fetching

Correct answer: Offload the computation to a Web Worker so the main thread remains responsive

Web Workers run in a separate thread, so heavy computation doesn't block the main thread's rendering and user interaction.

Question 32: What does the JavaScript `Array.prototype.reduce()` method do?

Returns the smallest value in the array
Flattens a nested array into a single level
Executes a callback on each element to accumulate a single output value (Correct answer)
Removes duplicate values from an array

Correct answer: Executes a callback on each element to accumulate a single output value

reduce() applies a callback function with an accumulator and each element, folding the array down to a single return value.

Question 33: A developer uses innerHTML to render user-submitted comments on a community forum. What vulnerability does this introduce, and what is the fix?

SQL injection; use parameterized queries
Cross-Site Scripting (XSS); sanitize input with a library like DOMPurify or use textContent instead (Correct answer)
Clickjacking; add an X-Frame-Options header
CSRF; add a token to each request

Correct answer: Cross-Site Scripting (XSS); sanitize input with a library like DOMPurify or use textContent instead

Inserting unsanitized user content via innerHTML allows attackers to inject executable scripts; using textContent or a sanitizer prevents this.

Question 34: A junior developer on your team is struggling with a complex async JavaScript concept. As the senior, you should:

Ignore it since teaching is not your job
Pair-program or provide a guided explanation to build their understanding (Correct answer)
Fix their code for them without explanation
Report their struggle to management

Correct answer: Pair-program or provide a guided explanation to build their understanding

Mentoring strengthens the whole team and is a core competency expected of senior front-end engineers.

Question 35: What is the purpose of an .env file in a front-end project?

Configuring the web server's routing rules
Listing npm packages and their versions
Storing environment-specific configuration variables like API endpoints and feature flags (Correct answer)
Defining browser compatibility targets for transpilation

Correct answer: Storing environment-specific configuration variables like API endpoints and feature flags

An .env file holds environment variables that configure application behavior per environment (development, staging, production) without hardcoding values.

Question 36: During a code review you find a developer built a dropdown menu using only <div> and CSS. A screen reader user reports they cannot navigate it. The correct remediation is:

Increase the z-index of the dropdown
Add a title attribute to the container div
Replace divs with <ul>/<li> elements and add role='menu', role='menuitem', and keyboard event handlers (Correct answer)
Add tabindex=0 to each div item

Correct answer: Replace divs with <ul>/<li> elements and add role='menu', role='menuitem', and keyboard event handlers

ARIA menu roles combined with keyboard handlers (Arrow keys, Escape) implement the expected interaction pattern for screen reader and keyboard users.

Question 37: 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.

Question 38: Which tool is most commonly used to scaffold a new React project with zero configuration?

Gulp
Babel
Create React App or Vite (Correct answer)
Webpack CLI

Correct answer: Create React App or Vite

Create React App (CRA) and Vite are popular zero-config tools that scaffold a ready-to-use React project with bundling and dev server configured.

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

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

Correct answer: Probability and impact

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

Question 40: 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?

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

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 41: In Angular, what decorator is used to define a component?

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

Correct answer: @Component

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

Question 42: 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)
Remove all devDependencies from the project
Immediately patch and redeploy to production

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 43: Which tool category is MOST appropriate for collecting quantitative data on how users navigate a website?

Web analytics platforms like Google Analytics (Correct answer)
Git version control systems
Code linters like ESLint
CSS preprocessors like Sass

Correct answer: Web analytics platforms like Google Analytics

Web analytics platforms track user flows, page views, session duration, and navigation paths at scale, providing quantitative behavioral data.

Question 44: What does semantic HTML mean in front-end development?

Using only elements that render consistently across all browsers
Writing HTML without any inline styles
Structuring HTML to minimize file size
Using HTML elements that convey meaning about the content they contain (Correct answer)

Correct answer: Using HTML elements that convey meaning about the content they contain

Semantic HTML uses elements like <nav>, <header>, <footer>, and <article> whose names describe their purpose, improving accessibility and SEO.

Question 45: Which WCAG principle states that user interface components must be operable by keyboard alone?

Perceivable
Robust
Operable (Correct answer)
Understandable

Correct answer: Operable

The second WCAG principle, Operable, requires that all functionality be accessible via keyboard, covering users who cannot use a mouse.

Question 46: How should an Front End Development professional handle a situation outside their scope of competency?

Recognize limitations and refer to or consult with appropriate specialists (Correct answer)
Ignore the situation
Attempt it anyway
Decline all unfamiliar work

Correct answer: Recognize limitations and refer to or consult with appropriate specialists

This is fundamental to Front End Development practice. Recognize limitations and refer to or consult with appropriate specialists represents the professional standard for professional standards in the Front End Development certification framework.

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

Converting CommonJS to ESM
Splitting code into multiple files
Removing unused code from the final bundle (Correct answer)
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 48: What does the 'async' attribute on a <script> tag do?

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

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 49: A teammate's pull request contains working code but ignores the team's naming conventions. What is the professional response?

Approve it to avoid conflict
Rewrite the code yourself without telling them
Reject it without explanation
Leave a constructive comment requesting alignment with conventions before merging (Correct answer)

Correct answer: Leave a constructive comment requesting alignment with conventions before merging

Constructive code review feedback maintains code quality and team standards while preserving a respectful relationship.

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

Time until the page is fully interactive
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)

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 51: Which practice best supports maintainability in a large front-end codebase?

Avoiding comments to reduce clutter
Using inline styles for all elements
Writing clever, compact one-liners to reduce file size
Documenting complex logic and adhering to consistent code style (Correct answer)

Correct answer: Documenting complex logic and adhering to consistent code style

Consistent style and clear documentation allow future developers—including yourself—to understand and modify the code safely.

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

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

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 53: Which technique reduces the number of HTTP requests by combining multiple CSS files into one?

Minification
Bundling/concatenation (Correct answer)
Transpiling
Tree shaking

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 54: Which HTML element and attribute pairing is required for an accessible form input under WCAG 2.1?

<div aria-label='description'>
<input placeholder='description'>
<label for='id'> matching the input's id (Correct answer)
<input title='description'>

Correct answer: <label for='id'> matching the input's id

WCAG Success Criterion 1.3.1 requires form controls to have a programmatically associated label, which `<label for>` provides via the matching `id`.

Question 55: A marketing team wants to change the homepage hero image one day before a major launch. How should the front-end developer handle this?

Assess the actual effort, communicate the risk to the launch timeline, and let the stakeholder make an informed decision (Correct answer)
Tell them to submit a ticket for the next quarter
Make the change immediately without assessing impact
Refuse all last-minute changes categorically

Correct answer: Assess the actual effort, communicate the risk to the launch timeline, and let the stakeholder make an informed decision

Giving stakeholders accurate effort and risk information empowers them to make the final call rather than leaving the developer as the decision-maker.

Question 56: A government web portal must support users with low vision who increase browser font size to 200%. The layout breaks. The core CSS mistake is:

Using relative units like em and rem
Using CSS Grid for layout
Applying media queries with em units
Setting fixed pixel heights on containers that contain text (Correct answer)

Correct answer: Setting fixed pixel heights on containers that contain text

Fixed pixel heights do not scale with font size, so text overflows or is clipped when users zoom; using min-height with relative units fixes this.

Question 57: 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?

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

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 58: What role does active listening play in Front End Development practice?

It means staying silent
It ensures accurate understanding, demonstrates respect, and improves outcomes (Correct answer)
It wastes time
It is only for counseling professionals

Correct answer: It ensures accurate understanding, demonstrates respect, and improves outcomes

This is fundamental to Front End Development practice. It ensures accurate understanding, demonstrates respect, and improves outcomes represents the professional standard for communication in the Front End Development certification framework.

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

To convert code to a different language
To add comments for documentation
To reduce file size by removing whitespace and unnecessary characters (Correct answer)
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 60: Which browser API allows web applications to store structured data locally using an asynchronous, transactional database?

localStorage
Web SQL
sessionStorage
IndexedDB (Correct answer)

Correct answer: IndexedDB

IndexedDB is a low-level browser API for client-side storage of large amounts of structured data with indexed querying support.

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

Transfer the risk to a third party via insurance
Monitor it regularly but avoid spending major resources on mitigation (Correct answer)
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 62: A back-end team exposes an API endpoint that returns data in a format different from what was agreed upon in the API contract. What should the front-end developer do first?

Block the sprint and wait without communicating
Raise the discrepancy with the back-end team referencing the agreed contract and request a fix or updated contract (Correct answer)
Rewrite the API yourself
Silently adapt the front-end code to handle both formats indefinitely

Correct answer: Raise the discrepancy with the back-end team referencing the agreed contract and request a fix or updated contract

Referencing the agreed contract creates a professional, documented basis for resolving the mismatch without finger-pointing.

Question 63: Which HTTP caching header tells the browser how long to cache a resource?

Cache-Control (Correct answer)
Content-Type
ETag
Last-Modified

Correct answer: Cache-Control

The Cache-Control header specifies caching directives, including max-age, which tells browsers how long to store a resource.

Question 64: Which JavaScript method returns a new array with only elements that pass a test function?

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

Correct answer: filter()

Array.prototype.filter() creates a new array containing only the elements for which the callback function returns true.

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

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

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 66: A stakeholder says 'I'll know it when I see it' instead of providing clear UI requirements. The best technique to move forward is:

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

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 67: An e-commerce site's product pages are dynamically generated but mostly identical across users. To maximize performance and CDN cache hit rate, the best rendering strategy is:

Pre-rendering only the top 10 products
Static Site Generation with on-demand revalidation (ISR) triggered by inventory updates (Correct answer)
Server-Side Rendering with no caching
Full Client-Side Rendering with an API call per page

Correct answer: Static Site Generation with on-demand revalidation (ISR) triggered by inventory updates

ISR generates static pages on demand and revalidates them when product data changes, combining CDN cacheability with up-to-date content.

Question 68: In user research, what is a 'think-aloud protocol'?

A documentation standard for component APIs
A brainstorming technique used in design sprints
A method where participants verbalize their thoughts while completing tasks, revealing their reasoning (Correct answer)
An accessibility requirement for screen reader users

Correct answer: A method where participants verbalize their thoughts while completing tasks, revealing their reasoning

Think-aloud protocols have users speak their thoughts continuously while using a product, surfacing confusion, expectations, and mental models in real time.

Question 69: A SPA's initial bundle is 2.4 MB, causing a 6-second time-to-interactive on mobile. Without changing frameworks, the best architectural change is:

Implement route-based code splitting with dynamic import() (Correct answer)
Move all logic to web workers
Convert all images to SVG
Enable gzip only

Correct answer: Implement route-based code splitting with dynamic import()

Route-based code splitting defers loading JavaScript for routes the user hasn't visited, dramatically reducing the initial bundle.

Question 70: In React, when does `useEffect` with an empty dependency array run?

On every re-render
Only once after the initial render (Correct answer)
Only when props change
Before every render

Correct answer: Only once after the initial render

An empty dependency array `[]` causes useEffect to run only once after the component's initial mount, similar to componentDidMount.

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

It generates sitemaps automatically
It provides a database backup
It serves assets from geographically closer servers to reduce latency (Correct answer)
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.

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