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 CSS Media Queries

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing the Practice

2:58 with Anwar Montasir

Take a look at the workspace associated with this video, and you’ll see the HTML contains the homepage of a fictional organization called CSS Wizards Incorporated. There’s a primary navigation, an article about using CSS media queries, and a footer containing a copyright. Your task in this practice session is to use CSS Media Queries to improve the experience on larger screens and on the printed page.

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
    Hi, my name is Anwar. 0:09
    I'm a designer, a developer, and a teacher at Treehouse. 0:11
    My pronouns are he/him. 0:14
    In this practice session, we'll be working with CSS Media Queries. 0:17
    Take a look at the workspace associated with this video, and you'll see the HTML 0:21
    contains the homepage of a fictional organization called CSS Wizards, Inc. 0:26
    There's a primary navigation, an article about using CSS Media Queries, 0:32
    and a footer containing a copyright. 0:36
    You won't need to alter the HTML at all to complete this practice session. 0:40
    Before we check out the CSS, let's preview the page in the browser. 0:45
    I'm looking at our layout in mobile view, and the page actually looks pretty good. 0:50
    The navigation is stacked vertically, the article forms a single column, and 0:55
    all the text looks legible. 0:59
    So you won't need to do anything to enhance mobile legibility 1:02
    in this exercise. 1:05
    However, let's take a look at some other use cases. 1:07
    One is the printed page. 1:11
    If I press Cmd+P, I can see that the print layout isn't all that optimal. 1:13
    Both the navigation and the image of the laptop take up a considerable amount of 1:19
    space, enough that three pages would be needed to print this small article. 1:23
    What about viewing the website on a large screen? 1:30
    Once again, it's not a great experience. 1:33
    The vertical navigation seems like a strange use of space here. 1:36
    Worse, the laptop image becomes gigantic, and 1:40
    the columns of text are far too wide for comfortable reading. 1:43
    Your task in this practice session is to use CSS Media Queries to improve 1:48
    the experience on larger screens and on the printed page. 1:53
    I'm previewing a finished version of the assignment. 1:57
    And now the navigation has been arranged horizontally. 2:00
    The article text is prevented from growing too wide. 2:04
    And the laptop image is quite a bit smaller and is off to the left 2:07
    so text can wrap next to it. 2:11
    On the printed page, I've kept the laptop image smaller and 2:14
    off to the left, and hidden the navigation, 2:17
    since users probably aren't interested in printing that part of my page. 2:20
    Now let's take a look at the CSS provided in your workspace. 2:26
    The CSS here is responsible for styling the mobile view, and 2:31
    you shouldn't need to edit any of it. 2:34
    Your task is to write CSS Media Queries at the bottom of the page. 2:37
    One for improving the layout for the printed page, and one for 2:42
    when the viewport grows wider than 768 pixels. 2:46
    I've included readings on CSS Media Queries in the Teacher's Notes 2:51
    if you need a refresher. Have fun. 2:55

    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