Front End Development Front-End Development Course 5 — Questions and Answers
Question 1: What is the purpose of the `localStorage` API in browsers?
- To store key-value data persistently in the browser with no expiration (Correct answer)
- To save data to the server without a database
- To cache network responses for offline use
- To store session data that clears when the tab closes
Correct answer: To store key-value data persistently in the browser with no expiration
localStorage stores string key-value pairs in the browser that persist across sessions until explicitly cleared by code or the user.
Question 2: Which CSS selector targets every other even row in a table?
- tr:nth-child(even) (Correct answer)
- tr:even
- tr:alternate
- tr:nth-of-type(2)
Correct answer: tr:nth-child(even)
tr:nth-child(even) matches every table row whose position is an even number, commonly used for zebra-striping.
Question 3: In JavaScript, what is a closure?
- A function that retains access to variables from its outer scope even after the outer function has returned (Correct answer)
- A method for closing browser windows programmatically
- A design pattern for encapsulating class methods
- A way to prevent event bubbling
Correct answer: A function that retains access to variables from its outer scope even after the outer function has returned
A closure is formed when an inner function captures and remembers its lexical environment, including variables from enclosing scopes.
Question 4: Which meta tag configures the viewport for responsive design on mobile devices?
- <meta name="viewport" content="width=device-width, initial-scale=1"> (Correct answer)
- <meta name="mobile" content="responsive">
- <meta name="scale" content="device-width">
- <meta name="responsive" content="true">
Correct answer: <meta name="viewport" content="width=device-width, initial-scale=1">
The viewport meta tag tells mobile browsers to set the page width to the device screen width and not to zoom out by default.
Question 5: What does the JavaScript `Array.prototype.reduce()` method do?
- Executes a callback on each element to accumulate a single output value (Correct answer)
- Removes duplicate values from an array
- Flattens a nested array into a single level
- Returns the smallest value in the 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 6: Which CSS property is used to create a smooth transition between two states of an element?
- transition (Correct answer)
- animation
- transform
- keyframe
Correct answer: transition
The transition property defines the duration, timing function, and target property for smooth state changes triggered by user interaction or class changes.
Question 7: What does semantic HTML mean in front-end development?
- Using HTML elements that convey meaning about the content they contain (Correct answer)
- Writing HTML without any inline styles
- Structuring HTML to minimize file size
- Using only elements that render consistently across all browsers
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.
Front End Development Front-End Development Course 5
What is the purpose of the `localStorage` API in browsers?