LPI Web Development Essentials (030-100) — Questions and Answers

Question 1: What does the Lighthouse 'Time to Interactive' (TTI) metric measure?

When the page is fully interactive and reliably responds to user input (Correct answer)
When the largest content element is rendered
When the first byte of response is received
When the page appears visually complete

Correct answer: When the page is fully interactive and reliably responds to user input

TTI measures when the main thread is quiet for at least 5 seconds and the page can reliably respond to user input.

Question 2: What CSS property is used to set how a grid item spans multiple columns?

column-count
flex-span
grid-column-span
grid-column: span N (Correct answer)

Correct answer: grid-column: span N

grid-column: span N (e.g., grid-column: span 2) causes a grid item to stretch across N column tracks.

Question 3: What is the purpose of `aria-live` regions in a web application?

To synchronize content between browser tabs
To enable real-time collaboration features
To announce dynamic content updates to screen reader users without requiring focus (Correct answer)
To animate elements when they appear

Correct answer: To announce dynamic content updates to screen reader users without requiring focus

`aria-live` marks a region so that screen readers automatically announce content changes within it, which is essential for notifications, alerts, and chat messages.

Question 4: Which method removes the last element from an array and returns it?

pop() (Correct answer)
slice()
shift()
splice()

Correct answer: pop()

`Array.prototype.pop()` removes and returns the last element, mutating the original array.

Question 5: What is the function of an Nginx reverse proxy in a web deployment?

Compiling server-side JavaScript before serving it
Encrypting database connections between app and database
Managing DNS records for the deployed domain
Forwarding client requests to backend application servers and returning responses (Correct answer)

Correct answer: Forwarding client requests to backend application servers and returning responses

Nginx as a reverse proxy sits in front of app servers, routing requests, handling SSL, and load balancing.

Question 6: What does a 'fast-forward' merge mean in Git?

All commits are squashed into one before merging
The merge is processed faster using parallel threads
The source branch is deleted immediately after the merge
The target branch pointer simply moves forward to the source branch tip, no merge commit needed (Correct answer)

Correct answer: The target branch pointer simply moves forward to the source branch tip, no merge commit needed

A fast-forward merge is possible when the target branch has no new commits since the source branch diverged, so no merge commit is created.

Question 7: Which normal form eliminates transitive dependencies?

1NF
3NF (Correct answer)
2NF
BCNF

Correct answer: 3NF

Third Normal Form (3NF) requires that non-key columns depend only on the primary key, eliminating transitive dependencies.

Question 8: Which meta tag is essential for responsive web design to work correctly on mobile browsers?

<meta name='HandheldFriendly' content='true'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1'> (Correct answer)
<meta name='mobile-web-app-capable' content='yes'>

Correct answer: <meta name='viewport' content='width=device-width, initial-scale=1'>

The viewport meta tag instructs mobile browsers to set the viewport width to the device width and prevent automatic zoom.

Question 9: What is the main advantage of using a managed platform like Vercel or Heroku over self-managed servers?

They provide dedicated CPU cores not available on bare metal
They allow direct SSH access to the underlying virtual machine
They abstract infrastructure management, handling scaling, SSL, and deployments automatically (Correct answer)
They offer lower latency than self-hosted solutions in all cases

Correct answer: They abstract infrastructure management, handling scaling, SSL, and deployments automatically

Managed platforms handle provisioning, scaling, and operations so developers focus on code rather than infrastructure.

Question 10: In web development, what does 'lazy loading' an image accomplish?

Compresses images automatically using WebP format
Loads images at the lowest possible resolution first
Preloads all images before the page renders
Defers loading off-screen images until they are about to enter the viewport (Correct answer)

Correct answer: Defers loading off-screen images until they are about to enter the viewport

Lazy loading delays fetching images that are not yet visible, reducing initial page load time and saving bandwidth for users who don't scroll far.

Question 11: Which Next.js rendering strategy fetches data on every request and is never cached?

Incremental Static Regeneration (ISR)
Client-Side Rendering (CSR)
Static Site Generation (SSG)
Server-Side Rendering (SSR) with getServerSideProps (Correct answer)

Correct answer: Server-Side Rendering (SSR) with getServerSideProps

getServerSideProps runs on every request, making it true SSR—ideal for pages that need real-time data but unsuitable for high-traffic pages due to server load.

Question 12: What does `JSON.stringify()` do when it encounters a function value in an object?

Converts it to a string representation of the function
Converts it to null
Throws a TypeError
Omits the key entirely (Correct answer)

Correct answer: Omits the key entirely

`JSON.stringify()` silently omits object properties whose values are functions because JSON has no function type.

Question 13: What does `Array.prototype.reduce()` do?

Reduces the array length by removing duplicates
Executes a reducer function on each element to produce a single accumulated value (Correct answer)
Filters array elements based on a condition
Sorts elements and returns the smallest

Correct answer: Executes a reducer function on each element to produce a single accumulated value

`reduce()` iterates over an array applying a callback to an accumulator and each element, ultimately returning a single value.

Question 14: Which HTML element is used to embed an inline scalable vector graphic without an external file?

<svg> (Correct answer)
<embed>
<object>
<canvas>

Correct answer: <svg>

The `<svg>` element lets you write SVG markup inline within HTML, making it directly part of the DOM.

Question 15: What does a .dockerignore file do?

Excludes files and directories from the Docker build context (Correct answer)
Prevents Docker from starting on certain OS versions
Lists approved base images for the project
Disables specific Docker CLI commands

Correct answer: Excludes files and directories from the Docker build context

.dockerignore excludes paths from being sent to the Docker daemon during build, reducing image size and build time.

Question 16: What does the CSS property `object-fit: cover` do to an image?

Scales the image to cover the container while maintaining aspect ratio (Correct answer)
Centers the image without resizing
Shrinks the image to fit inside the container
Stretches the image to fill the container distorting it

Correct answer: Scales the image to cover the container while maintaining aspect ratio

object-fit: cover scales the image to cover the entire container while preserving its aspect ratio, cropping if necessary.

Question 17: In Web Development practice, what is the best approach to quality improvement in html and css?

Wait for problems to occur before acting
Use data-driven methods with measurable outcomes (Correct answer)
Copy what other organizations do without analysis
Make changes without measuring results

Correct answer: Use data-driven methods with measurable outcomes

Data-driven quality improvement with measurable outcomes ensures that changes actually produce the intended improvements and can be verified.

Question 18: What role does collaboration play in version control for Web Development professionals?

It enhances outcomes through diverse perspectives and shared expertise (Correct answer)
It reduces individual accountability
It slows down work unnecessarily
It is only needed in emergencies

Correct answer: It enhances outcomes through diverse perspectives and shared expertise

Collaboration leverages diverse perspectives and combined expertise to achieve better outcomes than any individual could alone.

Question 19: What does 'atomicity' mean in a database transaction?

Each operation runs in parallel
The transaction either completes fully or not at all (Correct answer)
Data is stored in the smallest possible unit
Each user transaction is isolated from others

Correct answer: The transaction either completes fully or not at all

Atomicity guarantees that all operations within a transaction succeed together or are all rolled back if any step fails.

Question 20: Which constraint ensures that a column's value must already exist as a primary key in another table?

NOT NULL
FOREIGN KEY (Correct answer)
CHECK
UNIQUE

Correct answer: FOREIGN KEY

A FOREIGN KEY constraint enforces referential integrity by requiring that the column's value matches a primary key in the referenced table.

Question 21: Which REST API design pattern uses a URL like '/users/{id}/orders' to represent relationships?

Linked resource pattern
Nested resource pattern (Correct answer)
Embedded resource pattern
Flat resource pattern

Correct answer: Nested resource pattern

Nested resources express parent-child relationships in the URL hierarchy, making it clear that orders belong to a specific user.

Question 22: What is the purpose of `Object.keys()` in JavaScript?

Returns an array of all properties including inherited ones
Returns the number of properties in an object
Checks if a key exists in an object
Returns an array of an object's own enumerable string-keyed property names (Correct answer)

Correct answer: Returns an array of an object's own enumerable string-keyed property names

`Object.keys()` returns an array of the object's own enumerable property names, excluding inherited or Symbol-keyed properties.

Question 23: Which method is used to attach an event handler to a DOM element in modern JavaScript?

element.on()
element.attachEvent()
element.addEventListener() (Correct answer)
element.bindEvent()

Correct answer: element.addEventListener()

`addEventListener()` is the standard method to attach event handlers, allowing multiple handlers on the same element.

Question 24: Which principle is fundamental to good database basics practice?

Avoiding all abstraction
Separation of concerns and modularity (Correct answer)
Writing as much code as possible
Never refactoring code

Correct answer: Separation of concerns and modularity

Separation of concerns and modularity make code easier to understand, test, maintain, and extend over time.

Question 25: What does Rails' 'Convention over Configuration' principle mean?

Rails generates config files automatically from code analysis
Developers follow framework defaults to avoid boilerplate configuration (Correct answer)
Configuration is stored in the database rather than files
Rails uses AI to configure apps based on requirements

Correct answer: Developers follow framework defaults to avoid boilerplate configuration

Convention over Configuration means Rails assumes sensible defaults (file naming, folder structure, database columns) so developers write less explicit configuration.

Question 26: What is 'content shifting' and why is it a problem in responsive design?

Changing content based on user geolocation
Layout elements jumping position after the page loads, causing poor user experience (Correct answer)
Shifting text alignment for RTL languages
Moving content to a CDN for faster delivery

Correct answer: Layout elements jumping position after the page loads, causing poor user experience

Content shifting (Cumulative Layout Shift) occurs when page elements move unexpectedly after initial render, disrupting users and hurting Core Web Vitals scores.

Question 27: What does the `async` keyword do when placed before a function declaration?

Causes the function to always return a Promise
Allows the function to pause execution with `await`
Makes the function run on a separate thread
Both B and C (Correct answer)

Correct answer: Both B and C

An `async` function always returns a Promise and enables the use of `await` inside it to pause execution until a Promise settles.

Question 28: In OpenAPI (Swagger) specification, what is a 'schema'?

A list of available API endpoints
An authentication configuration block
A description of the structure and validation rules for request/response data (Correct answer)
A database table definition

Correct answer: A description of the structure and validation rules for request/response data

In OpenAPI, a schema defines the shape, data types, and constraints of request bodies, response objects, and query parameters.

Question 29: Which attribute on an `<a>` tag opens the linked URL in a new browser tab?

target="_blank" (Correct answer)
rel="new"
target="_new"
open="tab"

Correct answer: target="_blank"

`target="_blank"` instructs the browser to open the href in a new browsing context (tab or window).

Question 30: Which event fires when the DOM is fully loaded but before images and stylesheets have loaded?

beforeunload
window.onload
readystatechange
DOMContentLoaded (Correct answer)

Correct answer: DOMContentLoaded

`DOMContentLoaded` fires when the initial HTML is parsed and DOM is ready, without waiting for stylesheets, images, or subframes.

Question 31: What does the `Array.from()` method do?

Creates a shallow copy of an existing array
Creates a new Array instance from an array-like or iterable object (Correct answer)
Merges two arrays into one
Converts an array to a string

Correct answer: Creates a new Array instance from an array-like or iterable object

`Array.from()` creates a new array from array-like objects (e.g., NodeLists, strings) or iterables.

Question 32: What is the recommended strategy for serving different image resolutions to different device pixel ratios using HTML?

Using CSS media queries on <img> tags
Using data-src attributes with a polyfill
Using the srcset attribute on <img> elements (Correct answer)
Using JavaScript to dynamically set the src attribute

Correct answer: Using the srcset attribute on <img> elements

The srcset attribute lets you specify multiple image sources at different sizes, and the browser picks the most appropriate one.

Question 33: What is the purpose of `useMemo` in React?

Memoizes API responses to avoid duplicate network requests
Caches the result of an expensive computation and only recomputes when dependencies change (Correct answer)
Stores component state across page refreshes
Memoizes a function reference to prevent it from being recreated on each render

Correct answer: Caches the result of an expensive computation and only recomputes when dependencies change

useMemo returns a memoized value, recomputing only when its dependency array changes, preventing expensive recalculations on every render.

Question 34: What is the symbol for a tag?

Curved brackets e.g. {,}
Exclamation marks e.g. !
Commas e.g. ','
Angle brackets e.g. (Correct answer)

Correct answer: Angle brackets e.g.

In HTML, tags are the fundamental components used to define elements and structure content within a web page. These tags are always enclosed within angle brackets, such as `<p>` for a paragraph or `<a>` for a hyperlink. This distinct syntax differentiates HTML tags from regular text content in a document.

Question 35: What is a deployment pipeline's 'artifact' stage responsible for?

Rotating secrets and API keys before release
Notifying the team via Slack when a deploy is complete
Running integration tests against a live database
Packaging the built application into a deployable unit (e.g., ZIP, image, tarball) (Correct answer)

Correct answer: Packaging the built application into a deployable unit (e.g., ZIP, image, tarball)

The artifact stage compiles and packages the application so the same immutable bundle can be promoted through environments.

Question 36: What does DDL stand for in SQL?

Data Definition Language (Correct answer)
Database Design Layout
Dynamic Data Layer
Data Deletion Logic

Correct answer: Data Definition Language

DDL (Data Definition Language) includes commands like CREATE, ALTER, and DROP that define database structure.

Question 37: Which principle is fundamental to good javascript practice?

Writing as much code as possible
Never refactoring code
Separation of concerns and modularity (Correct answer)
Avoiding all abstraction

Correct answer: Separation of concerns and modularity

Separation of concerns and modularity make code easier to understand, test, maintain, and extend over time.

Question 38: What is the purpose of the `Promise.all()` method?

Returns the first promise to settle
Runs promises sequentially and returns the last result
Ignores rejected promises and returns only resolved values
Resolves when all promises resolve, or rejects if any one rejects (Correct answer)

Correct answer: Resolves when all promises resolve, or rejects if any one rejects

`Promise.all()` takes an iterable of promises and returns a single promise that resolves with an array of results when all input promises resolve.

Question 39: What does the 'defer' attribute do when added to a <script> tag?

Loads the script asynchronously and executes immediately
Prevents the script from loading until user interaction
Executes the script before DOM construction begins
Downloads the script in parallel and executes after HTML parsing completes (Correct answer)

Correct answer: Downloads the script in parallel and executes after HTML parsing completes

The defer attribute downloads the script without blocking HTML parsing and runs it after the document is fully parsed.

Question 40: In a CSS Grid layout, what does 'fr' stand for and represent?

Frame rate unit for animations
Fixed ratio of the container's total width
Frequency unit for responsive breakpoints
Fractional unit — a share of the available free space (Correct answer)

Correct answer: Fractional unit — a share of the available free space

The fr unit represents a fraction of the leftover free space in the grid container after fixed-size tracks are accounted for.

LPI Web Development Essentials (030-100)

The LPI Web Development Essentials certification validates foundational skills in modern web development, covering HTML, CSS, JavaScript, server-side programming, and web application architecture. It is designed for entry-level web developers and those seeking to formalize their front-end and back-end knowledge.

Questions

60 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

These practice questions were written with AI tools. They are not real exam questions. We have not yet matched this exam's facts to an official source, so confirm fees, dates and rules with the exam body. Not reviewed by a subject-matter expert. Editorial policy