Front End Development Front-End Development 5 — Questions and Answers
Question 1: What is the purpose of a CSS custom property (variable), declared with `--`?
- To define browser-vendor-prefixed styles
- To store reusable values that can be referenced throughout a stylesheet (Correct answer)
- To apply styles conditionally based on media queries
- To override inline styles with higher specificity
Correct answer: To store reusable values that can be referenced throughout a stylesheet
CSS custom properties (variables) like `--primary-color: blue;` store values that can be reused with `var(--primary-color)`, making stylesheets more maintainable.
Question 2: 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 3: In the browser's rendering pipeline, what happens during the 'paint' phase?
- The browser calculates the position and size of all elements
- The browser fills in pixels — colors, borders, shadows, and text (Correct answer)
- The browser executes JavaScript event handlers
- The browser resolves CSS selector specificity
Correct answer: The browser fills in pixels — colors, borders, shadows, and text
During the paint phase, the browser rasterizes each layer by filling in the actual pixel values for visual properties like colors, backgrounds, borders, and shadows.
Question 4: What does the `srcset` attribute on an `<img>` element allow you to do?
- Define multiple fallback image formats (JPEG, PNG, WebP)
- 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
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 5: What is the purpose of `aria-label` in HTML?
- It sets a visible text label above an input field
- It provides an accessible name for an element for screen readers when no visible text is available (Correct answer)
- It marks an element as required in a form
- It links a label element to an input by ID
Correct answer: It provides an accessible name for an element for screen readers when no visible text is available
aria-label provides a text alternative that screen readers announce for elements that lack visible descriptive text, improving accessibility.
Question 6: Which JavaScript array method would you use to transform each element and return a new array of the same length?
- forEach()
- reduce()
- filter()
- map() (Correct answer)
Correct answer: map()
Array.prototype.map() calls a function on each element and returns a new array of the same length with the transformed values.
Question 7: What is the Critical Rendering Path in web performance?
- The sequence of steps the server takes to generate HTML responses
- The browser steps from receiving HTML/CSS/JS bytes to rendering pixels on screen (Correct answer)
- 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.
Front End Development Front-End Development 5
What is the purpose of a CSS custom property (variable), declared with `--`?