- Explain what responsive design is
- Use media queries
- Use CSS Grid
- Build responsive webpages with CSS
-
What is responsive design?
Your answer...
-
What does this common html meta tag do:
<meta name="viewport" content="width=device-width, initial-scale=1">
Your answer...
-
What does a media query do in CSS? How are they used to build responsive websites? What css properties (
media features
) can you target?Your answer...
-
What is CSS Grid property? How is it used? When might you choose CSS Grid over Flexbox?
Your answer...
Fork the following JSFiddle Add media query breakpoints to achieve the following:
- yellow box is filled when width is bellow
200px
- green box is filled when width is above
200px
- red box is colored when width is between
200px
and300px
- blue box is colored when width is bellow
200px
or above350px
https://jsfiddle.net/scotthurlow/c39rms7v/
Use the resources bellow to complete the following challege using CSS Grid: https://github.com/gSchool/css-grid-example