Front End Development Front-End Development Course 4 — Questions and Answers
Question 1: What is the purpose of a CSS media query?
- To apply styles conditionally based on device characteristics like screen width (Correct answer)
- To load different image files depending on bandwidth
- To import external stylesheets
- To animate elements at specific screen sizes
Correct answer: To apply styles conditionally based on device characteristics like screen width
Media queries allow CSS rules to be applied only when certain conditions like screen width, orientation, or resolution are met.
Question 2: Which JavaScript method is used to send an HTTP request asynchronously without a page reload?
- fetch() (Correct answer)
- request()
- httpGet()
- ajax()
Correct answer: fetch()
fetch() is the modern browser API that returns a Promise and allows sending HTTP requests without navigating away from the page.
Question 3: In HTML, what is the difference between `<b>` and `<strong>`?
- <strong> conveys semantic importance while <b> is purely stylistic bold (Correct answer)
- They are identical in meaning and rendering
- <b> conveys importance and <strong> is stylistic
- <strong> only works inside headings
Correct answer: <strong> conveys semantic importance while <b> is purely stylistic bold
<strong> signals that the content is of strong importance to assistive technologies, while <b> just applies bold styling with no semantic meaning.
Question 4: What does the CSS `position: sticky` value do?
- The element acts as relative until it crosses a scroll threshold, then becomes fixed (Correct answer)
- The element stays fixed at the top of the viewport always
- The element is removed from normal document flow
- The element sticks to its nearest positioned parent permanently
Correct answer: The element acts as relative until it crosses a scroll threshold, then becomes fixed
position: sticky toggles between relative and fixed positioning based on the scroll position, relative to the nearest scrolling ancestor.
Question 5: Which of the following best describes a CSS Grid `fr` unit?
- A fractional unit representing a share of the remaining available space (Correct answer)
- A fixed unit equal to one frame in an animation
- A percentage of the parent element's font size
- A fluid unit equal to 1% of the viewport width
Correct answer: A fractional unit representing a share of the remaining available space
The fr unit distributes the leftover space in a grid container proportionally among tracks that use it.
Question 6: What is event bubbling in JavaScript?
- When an event triggered on a child element propagates up through its parent elements (Correct answer)
- When multiple events fire simultaneously on the same element
- When a click event is delayed to wait for double-clicks
- When events queue up and execute in order
Correct answer: When an event triggered on a child element propagates up through its parent elements
Event bubbling means an event fires on the target element first, then propagates up the DOM tree to ancestor elements unless stopped.
Question 7: Which HTML attribute makes a form input required before form submission?
- required (Correct answer)
- mandatory
- validate
- nonempty
Correct answer: required
The required attribute triggers native browser validation to prevent form submission if the field is empty.
Front End Development Front-End Development Course 4
What is the purpose of a CSS media query?