Fundamentals of Front End Development MCQs with Answers
Practice important Fundamentals of Front End Development MCQs with answers and explanations.
Chapter: 164
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)
Correct Answer:
A
Chapter: 164
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
Correct Answer:
B
Chapter: 164
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
Correct Answer:
B
Chapter: 165
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
Correct Answer:
C
Chapter: 165
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
Correct Answer:
C
Chapter: 165
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
Correct Answer:
C
Chapter: 165
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
Correct Answer:
C
Chapter: 165
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
Correct Answer:
B
Chapter: 165
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
Correct Answer:
C
Chapter: 165
Q1850:
What attribute is required in the <picture> element to define the image source?
A. media
B. srcset
C. alt
D. source
Correct Answer:
B
Chapter: 165
Q1851:
Fill in the blank: The <picture> element should include an <img> element to ensure compatibility with browsers that do not support the _______ element.
A. <audio>
B. <video>
C. <source>
D. <picture>
Correct Answer:
D
Chapter: 165
Q1852:
What does the background-size: 100% 100% property do for background images?
A. Keeps the aspect ratio of the image
B. Scales the image to fit within the content area
C. Stretches the image to cover the entire content area
D. Clips the image if it does not fit
Correct Answer:
C
Chapter: 165
Q1853:
Fill in the blank: For images to scale down but not scale up beyond their original size, you should use the _______ property.
A. width
B. max-width
C. height
D. min-width
Correct Answer:
B
Chapter: 165
Q1854:
What does the @media only screen and (max-width: 400px) rule do?
A. Applies styles for screens larger than 400px
B. Applies styles for screens smaller than 400px
C. Applies styles for screens equal to 400px
D. Applies styles for all screens
Correct Answer:
B
Chapter: 166
Q1855:
What does setting width: 100% for a video player do?
A. Scales the video up only
B. Scales the video down only
C. Scales the video up and down
D. Keeps the video at its original size
Correct Answer:
C
Chapter: 166
Q1856:
Fill in the blank: To ensure a video player does not scale up beyond its original size, you should use the ______ property.
A. width
B. height
C. max-width
D. min-width
Correct Answer:
C
Chapter: 166
Q1857:
What does the max-width: 100% property do for a video player?
A. Scales the video up and down
B. Scales the video down only
C. Ensures the video never scales up
D. Allows the video to scale up and down
Correct Answer:
C
Chapter: 166
Q1858:
Fill in the blank: To make a video player responsive and scale according to the size of its container, you should set its ______ property to 100%.
A. width
B. height
C. max-width
D. min-width
Correct Answer:
A
Chapter: 166
Q1859:
What CSS property ensures a video player does not exceed its original size while scaling down?
A. width
B. height
C. max-width
D. min-width
Correct Answer:
C
Chapter: 166
Q1860:
Fill in the blank: The width: 100% setting for a video player makes it ______.
A. scale down only
B. scale up only
C. scale up and down
D. stay at its original size
Correct Answer:
C