Front End Developer Quiz
Questions: 16 · 10 minutes
1. A responsive page should let the browser select among several versions of the same image according to display density and layout width. Which HTML features are designed for this?
alt and title
width and loading
srcset and sizes
href and media
2. Assuming the same origin and importance and no inline styles, which matching CSS selector has the greatest specificity?
.nav .item.active
#site-nav a
header nav a
a.item:hover
3. A table can gain new rows after an API request. You want one click handler to respond to buttons in both existing and future rows. Which approach is most suitable?
Clone an existing row so its addEventListener registrations are copied
Add a separate window click listener whenever a row is created
Attach one listener to a stable ancestor and inspect the event target
Run setInterval to check whether any row button was clicked
4. A checkout form needs a control that submits the form and works with keyboards and assistive technology by default. Which markup is the best choice?
<button type=""submit"">Place order</button>
<a href=""#"" onclick=""submitOrder()"">Place order</a>
<div tabindex=""0"">Place order</div>
<span role=""link"">Place order</span>
5. An icon-only button displays a magnifying-glass SVG but no visible text. Which addition can directly provide it with an accessible name?
Set tabindex=""-1"" on the button
Add aria-hidden=""true"" to the button
Give the SVG a CSS background color
Add aria-label=""Search"" to the button
6. What value is assigned to result by this code: const result = [1, 2, 3, 4].filter(n => n % 2 === 0).map(n => n * 2);?
[4, 8]
[2, 4, 6, 8]
[1, 3]
[2, 4]
7. A card has width: 300px, padding: 20px, and a 2px border. Which declaration keeps its rendered outer width at 300px?
overflow: hidden
max-width: 300px
display: block
box-sizing: border-box
8. What is the console output order for this code: console.log('A'); Promise.resolve().then(() => console.log('B')); setTimeout(() => console.log('C'), 0); console.log('D');?
A, D, B, C
A, B, D, C
A, D, C, B
A, B, C, D
9. Which statement about a standard <script type=""module"" src=""app.js""></script> element is correct?
It is deferred by default and supports JavaScript module syntax
It always blocks HTML parsing until the script finishes executing
It runs in classic non-strict script mode unless use strict is added
It can use import and export only after being converted into a classic script
10. A browser sends If-None-Match with an ETag, and the cached resource has not changed. Which response normally lets the browser reuse its cached body?
201 Created
304 Not Modified
206 Partial Content
410 Gone
11. A user's comment must be inserted into an element as plain text, not interpreted as HTML. Which DOM property is the safest direct choice?
innerHTML
textContent
insertAdjacentHTML
outerHTML
12. After a user saves a profile, an existing status region changes from “Saving” to “Saved.” Which attribute can make such non-urgent updates announceable without moving keyboard focus?
aria-hidden=""true""
tabindex=""-1""
aria-live=""polite""
role=""presentation""
13. A text label and input are separate sibling elements. Which attributes explicitly associate the label with that input?
Matching name attributes on both elements
A target attribute on the label matching the input's class
A placeholder on the input matching the label text
A for attribute on the label matching the input's id
14. If the root element's computed font size is 16px, what computed length does margin: 1.5rem produce?
16px
18px
22px
24px
15. In JavaScript, what does the === operator do?
Compares values after converting both operands to strings
Assigns a value while preserving its original type
Compares value and type without coercing the operands
Compares only whether two variables use the same name
16. You need a CSS Grid container with three equal-width columns that share the available space. Which declaration expresses that directly?
grid-template-columns: auto auto auto
grid-template-columns: repeat(3, 1fr)
grid-template-rows: 33% 33% 33%
grid-auto-flow: column dense