Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice Media Queries

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Let's Practice Media Queries!

2:22 with Guil Hernandez

Media queries let you adapt the presentation of your content to a specific range of devices and screen sizes, without having to change the content itself. In this practice session, you'll write five media queries to adjust the layout of a web page at different viewport sizes.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up