Responsive Navigation with Media Queries

In this session, we'll look at how to create responsive navigation with flexbox and media queries.

Housekeeping

Daily Standup

In the same groups as last class

Each person takes a turn to answer the following questions:

  1. What did you do yesterday?
  2. What will you do today?
  3. Anything blocking your progress?

1. Splitting Styles and Review

Example Code

Activity: CSS Separation

  1. Take one of your projects with the most CSS.
  2. Split your stylesheet logically into multiple files, such as:
    • reset.css
    • typography.css
    • layout.css
    • etc
  3. <link> to each of these files in your index.html.

2. Review: Inspecting the CSS Cascade

CSS Cascade

3. Media Queries

Responsive Banners Slides

Materials

Example Code

Activity: Changing background-color with a media query

To get you started on Today’s Achievement:

  1. Take an example of your own code from previous lessons in this course.
  2. Create a min-width media query at the end of your stylesheet and change the background-color on Desktop screens.

Today's Achievement

min-width Media Query

Add a mobile-first media query to a project.

Instructions

  1. Take an example of your own code from previous lessons in this course.
  2. Choose some styles within your project that you would like to show only on Desktop screens. For example, on Desktop:
    • Show or hide an element;
    • Make the font-size larger;
    • Add a flexbox;
  3. Create a min-width media query at the end of your stylesheet and move your selected styles into it.
  4. View your site on both mobile and desktop screen widths (you can do this in the Inspector).
    • Does the design make sense to the user?

Marking Criteria

Full points will be awarded for media queries that:

  • are practical;
  • extend the examples given in class;
  • show originality.

Lesson Prep

Reading list

Watch List