Responsive Web Design Quiz

What is Responsive Web Design?

• A programming language for making websites interactive

• A design approach that makes web pages adaptable to different screen sizes

• A tool for testing website speed

• A JavaScript library for animations

Which of the following technologies are primarily used in Responsive Web Design?

• HTML & CSS

• JavaScript & PHP

• Python & Django

• SQL & Bootstrap

What is the viewport in Responsive Web Design?

• The entire webpage's layout

• The area of a webpage visible to the user on their device

• A CSS property for animations

• A Bootstrap framework component

What does the following meta tag do?

• Enables animations on the webpage

• Ensures the website adapts to different screen sizes

• Prevents users from zooming in on mobile devices

• Changes the text color based on screen size

What does max-width: 100% do for an image?

• Stretches the image beyond its original size

• Makes the image adapt to the container width

• Prevents the image from being displayed

• Centers the image in the viewport

What is a grid-view in Responsive Web Design?

• A layout system that divides a page into rows and columns

• A JavaScript function for dynamic content

• A media query that hides text on small screens

• A pre-designed website template

How many columns does a responsive grid usually have?

• 2

• 6

• 12

• 24

Which CSS property ensures an element includes padding and borders in its total width calculation?

• box-shadow

• box-sizing

• border-collapse

• padding-box

What is the primary purpose of using @media in CSS?

• To apply specific styles based on screen size

• To insert JavaScript into CSS

• To control animations in CSS

• To define variables in CSS

What is the default behavior of an element's width and height without box-sizing: border-box;?

• Width and height include padding and borders

• Width and height exclude padding and borders

• The element's width shrinks automatically

• The element's height expands beyond the viewport