Fundamentals of Front End Development MCQs with Answers
Practice important Fundamentals of Front End Development MCQs with answers and explanations.
Multiple Choice Questions
Q1831: Fill in the blank: To have more control over the layout, the grid-view structure uses a total width of ____.
- A: 0.75
- B: 1
- C: 0.5
- D: 0.25
View Answer
B
Q1832: How should the columns inside a row be styled to ensure they fit within the viewport?
- A: Apply a fixed width to each column
- B: Set the width of the columns in percentage
- C: Use a fixed height for each column
- D: Set a minimum width for each column
View Answer
B
Q1833: What is the purpose of a media query in CSS3?
- A: To include JavaScript in a CSS file
- B: To add CSS properties based on browser conditions
- C: To change HTML content based on screen size
- D: To enhance page load speed
View Answer
B
Q1834: Fill in the blank: A media query uses the @media rule to include CSS properties only if a certain ______ is true.
- A: font size
- B: color
- C: condition
- D: element
View Answer
C
Q1835: How can you apply CSS styles only for screens smaller than 500px?
- A: Use the @media only screen and (min-width: 500px) rule
- B: Use the @media only screen and (max-width: 500px) rule
- C: Use the @media only screen and (min-height: 500px) rule
- D: Use the @media only screen and (max-height: 500px) rule
View Answer
B
Q1836: Fill in the blank: For screens smaller than 768px, each column should have a width of _____.
- A: 0.5
- B: 0.25
- C: 1
- D: 0.75
View Answer
C
Q1837: What is a breakpoint in responsive design?
- A: A point where the design changes based on screen size
- B: A point where the website stops loading
- C: A point where CSS properties are ignored
- D: A point where JavaScript is executed
View Answer
A
Q1838: Fill in the blank: To create a mobile-first design, you should write styles for mobile devices first and then use media queries for devices with ______ screen sizes.
- A: larger
- B: smaller
- C: equal
- D: static
View Answer
A
Q1839: What CSS rule would you use to change the background color to light blue in landscape orientation?
- A: @media only screen and (orientation: landscape) { body { background-color: lightblue; } }
- B: @media only screen and (min-width: 768px) { body { background-color: lightblue; } }
- C: @media only screen and (max-width: 500px) { body { background-color: lightblue; } }
- D: @media only screen and (orientation: portrait) { body { background-color: lightblue; } }
View Answer
A
Q1840: Fill in the blank: The CSS rule @media only screen and (min-width: 600px) targets screens that are _______ than 600px wide.
- A: narrower
- B: wider
- C: equal
- D: static
View Answer
B