Responsive Web Design

#1. What is Responsive Web Design?

Using JavaScript for animations

Using only HTML tables for layout

Designing websites to adapt to different screen sizes and devices

Creating static websites

#2. Which CSS property is used to control the layout in a flexible and adaptive way?

flex

display

grid

float

#3. What does the @media rule in CSS do?

Adds multimedia features

Applies styles conditionally based on screen size or device characteristics

Embeds media files

Adds animations to the webpage

#4. What is the best practice for creating a responsive website?

Use a combination of fluid grids, flexible images, and media queries

Use tables for layout

Use fixed-width layouts

Avoid using CSS

#5. Which unit is recommended for responsive font sizing?

rem

#6. What is a viewport in the context of Responsive Web Design?

The browser's area for rendering the website

A CSS property for aligning text

A JavaScript function for resizing images

A tool for creating wireframes

#7. What is the purpose of the <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> tag?

It disables media queries

It makes a site load faster

It centers the content on the page

It ensures proper scaling of content on mobile devices

#8. Which of the following is an advantage of responsive web design?

Eliminates the need for media queries

Increases website load time

Improves user experience across devices

Requires separate code for mobile and desktop

#9. What is the difference between max-width and min-width in media queries?

max-width applies to text only, while min-width applies to images

They are interchangeable

max-width adjusts the resolution, while min-width adjusts the layout

max-width applies styles to screens smaller than the value, while min-width applies to screens larger than the value

#10. Which CSS framework is popular for building responsive websites?

Laravel

React

Angular

Bootstrap

#11. What is the purpose of the flex-wrap property in a flex container?

Aligns items in a flexbox container

Prevents items from wrapping to the next line

Allows items to wrap onto multiple lines when necessary

Sets a fixed width for the flex container

#12. What does the term “mobile-first design” mean?

Using only mobile-friendly images

Removing desktop functionality entirely

Prioritizing the mobile version of a website during development

Designing for desktop screens first

#13. Which property is used to make an image responsive?

float

height

max-width

background-size

#14. What is the default breakpoint for a medium screen in Bootstrap 5?

1200px

768px

576px

992px

#15. Which of the following is not a responsive design technique?

Fixed layouts

Media queries

Flexible images

Fluid grids

#16. What is the purpose of the vh and vw units in CSS?

To create animations

To measure the scroll distance of the webpage

To set the size relative to the browser's viewport height and width

To define fixed pixel dimensions

#17. What is the effect of setting box-sizing: border-box; in CSS?

Only the border is included in the total size

It has no effect on the layout

Padding and border are ignored

Padding and border are included in the element's total width and height

#18. How do you hide an element only on small screens using Bootstrap classes?

hide-small

d-none d-sm-block

display-none-small

hidden-sm

#19. Which CSS property is used to control the stacking order of elements?

float

z-index

layer

position

#20. What is the recommended strategy for testing responsive websites?

Test only on desktop browsers

Avoid using emulators

Only resize the browser window

Test on real devices and emulators

Finish

Results

Congratulations !

Opps! Try Again

Menus 📃

Indian Insights 📖

Important QA (महत्वपूर्ण प्र. उ. )

Lifestyle and Entertainment (जीवनशैली और मनोरंजन)

CodeQuest 📖

Web Design

JavaScript & Frameworks

Programming Languages

Database & SQL (Coming soon)

SOCIAL SHARING 🖐

Welcome to CodeQuest

HTML, CSS & Bootstrap

JavaScript & Frameworks

Programming Languages

Database & SQL (Coming soon)

Responsive Web Design

There are Multiple Choice Questions

Correct answers color: Green

Wrong answers color: Red

#1. What is Responsive Web Design?

#2. Which CSS property is used to control the layout in a flexible and adaptive way?

#3. What does the @media rule in CSS do?

#4. What is the best practice for creating a responsive website?

#5. Which unit is recommended for responsive font sizing?

#6. What is a viewport in the context of Responsive Web Design?

#7. What is the purpose of the <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> tag?

#8. Which of the following is an advantage of responsive web design?

#9. What is the difference between max-width and min-width in media queries?

#10. Which CSS framework is popular for building responsive websites?

#11. What is the purpose of the flex-wrap property in a flex container?

#12. What does the term “mobile-first design” mean?

#13. Which property is used to make an image responsive?

#14. What is the default breakpoint for a medium screen in Bootstrap 5?

#15. Which of the following is not a responsive design technique?

#16. What is the purpose of the vh and vw units in CSS?

#17. What is the effect of setting box-sizing: border-box; in CSS?

#18. How do you hide an element only on small screens using Bootstrap classes?

#19. Which CSS property is used to control the stacking order of elements?

#20. What is the recommended strategy for testing responsive websites?

Results

Leave a Reply Cancel reply

Social Sharing