Fundamentals of Front End Development MCQs with Answers
Practice important Fundamentals of Front End Development MCQs with answers and explanations.
Multiple Choice Questions
Q1841: How can you target tablets specifically in responsive design?
- A: Use @media only screen and (min-width: 600px)
- B: Use @media only screen and (max-width: 768px)
- C: Use @media only screen and (orientation: landscape)
- D: Use @media only screen and (min-width: 768px)
View Answer
A
Q1842: Fill in the blank: For a responsive grid-view, the total width of the grid should always be ____.
- A: 0.75
- B: 1
- C: 0.5
- D: 0.25
View Answer
B
Q1843: What does the CSS rule [class*="col-"] { width: 100%; } achieve for screens smaller than 768px?
- A: Sets all columns to have a width of 50%
- B: Sets all columns to have a width of 100%
- C: Hides all columns
- D: Makes columns float to the left
View Answer
B
Q1844: What does setting width: 100% for an image do?
- A: Scales the image up only
- B: Scales the image down only
- C: Scales the image up and down
- D: Keeps the image at its original size
View Answer
C
Q1845: Fill in the blank: To ensure an image does not scale up beyond its original size, you should use the ______ property.
- A: width
- B: height
- C: max-width
- D: min-width
View Answer
C
Q1846: What does the background-size: cover property do for background images?
- A: Stretches the image to fit the content area
- B: Scales the image while maintaining aspect ratio
- C: Scales the image to cover the entire content area
- D: Clips the image to fit the content area
View Answer
C
Q1847: Fill in the blank: The background-size: contain property will make sure the background image scales to fit the _______ while maintaining its aspect ratio.
- A: width
- B: height
- C: content area
- D: viewport
View Answer
C
Q1848: How can you display different background images for different screen widths?
- A: By using JavaScript only
- B: By using media queries
- C: By using a single background image
- D: By resizing the image manually
View Answer
B
Q1849: Fill in the blank: The min-device-width media query checks the _______ width of the device.
- A: browser
- B: content area
- C: device
- D: viewport
View Answer
C
Q1850: What attribute is required in the <picture> element to define the image source?
- A: media
- B: srcset
- C: alt
- D: source
View Answer
B