Let's Practice Media Queries!

[MUSIC] 0:00 Hey everyone, Guil here. 0:04 It's time to sharpen your CSS skills by practicing the fundamentals of media 0:05 queries. 0:09 You've learned that media queries are an important part of web design and 0:10 front end web development, because they let you adapt the presentation of your 0:13 content to a specific range of devices and 0:17 screen sizes without having to change the content itself. 0:19 So in this practice session, 0:23 you will write media queries to adjust the layout of the simple web page. 0:24 To get started, launch the workspace with this video. 0:27 I have included an HTML and CSS file for this exercise. 0:29 And one of the style sheets linked to the HTML 0:33 already includes all the base styles and layout styles for the page. 0:36 So now, let's walk through what you'll need to do. 0:39 In the file, media-queries.css, you are going to define 0:42 five media queries to create break points for the page at different viewport sizes. 0:45 The layout will be developed in mobile first, so 0:50 the break points you write will mostly be based on minimum viewport widths, 0:52 meaning the layout will scale up as the viewport changes. 0:56 In the style sheet, there are five chunks of CSS rules. 1:01 And above each one is a comment with instructions on the type of 1:04 media queries you'll need to write for that particular block of code. 1:07 For instance, this first block of rules is for 1:10 extra small viewport sizes, so it needs to be placed inside a media 1:13 query that targets viewport sizes narrower than 576 pixels. 1:18 So that means you'll use a media feature that targets a given viewport size along 1:22 with any viewport size that's smaller. 1:27 Below that, you'll need to wrap this set of rules here and 1:30 a media query that targets viewport sizes that are 576 pixels and wider. 1:32 Next, you'll place this nav rule inside a media query that 1:38 targets only a specific range of viewport sizes, so 1:43 a range wider than 575 pixels and narrower than 992 pixels. 1:47 Then, you will place these two rules in a media query, targeting medium devices and 1:52 up, so viewport sizes that are 768 pixels and wider. 1:57 And finally, you'll write a media query that floats the nav 2:01 element right when the viewport is 992px and wider. 2:06 When you're finished, your page should look similar to this. 2:11 Good luck, have fun. 2:14 And in the next video, I'll walk you through the solution. 2:15