Learn your way! Get started

Responsive Web Design, Part 3: Navigation & Media

with expert John Wiley & Sons

Watch trailer

Responsive Web Design, Part 3: Navigation & Media Trailer

Course at a glance

Included in these subscriptions:

  • Creative Design Power Pack
  • Power Pack Plus

Release date Release date 3/25/2015
Level Level Intermediate
Runtime Runtime 1h 17m
Platform Platform Major browsers on Windows Major browsers on Windows Major browsers on Mac OSX Major browsers on Mac OSX Mobile Devices Mobile Devices
Published eBooks Published eBooks N/A
Hands-on labs Hands-on labs N/A
Sample files Sample files Included
Exams Exams N/A

Enterprise Solutions
Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More

Course description

Master Responsive web design in this 3 part learning series, responsive web design is a web design approach aimed at developing sites to provide an optimal viewing experience with easy reading and navigation across a wide range of devices, from mobile phones to desktop computer monitors to tablets. Now, you can learn the ins and outs of responsive design – from basic best practices to working with HTML5, CSS3, and JavaScript – with Responsive Web Design. Discover what software, tools, and skills are required to create websites using responsive design techniques. Build on your existing knowledge of HTML5 syntax, CSS3 styling, and JavaScript libraries Understand the benefits and limitations of different online platforms on how to best scale your content to desktop and mobile formats.


This course assumes some familiarity with programming in HTML5 and CSS3. This course is part of a 3 course learning series, Responsive Web Design: Definition and Design; Responsive Web Design: Text and Borders; and Responsive Web Design: Navigation and Media. Please view the courses in the listed order if you are new to the material.

Meet the expert

John Wiley & Sons Our Creative Design courses are presented by experts from Wiley Publishing. Wiley is a global provider of knowledge and knowledge-enabled services that improve outcomes in areas of research, professional practice, and education. They are the publisher of award-winning journals, encyclopedias, books, and online products and services.

Course outline

Navigation and Media

Responsive Navigation (20:02)
  • Introduction (00:10)
  • Responsive Navigation (03:51)
  • CSS3 Media Queries (04:12)
  • The Query Expression (03:17)
  • The Toggle Menu (04:33)
  • Creating the Nav Element (03:47)
  • Summary (00:10)
The Mobile Media Queries Style (10:52)
  • Introduction (00:10)
  • Background & Link Styles (04:29)
  • The Hover Styles (03:05)
  • The Main Button Style (02:56)
  • Summary (00:10)
The Desktop Media Queries Style (24:25)
  • Introduction (00:10)
  • The Desktop Layout (03:12)
  • Setting the Main Content (04:27)
  • The Menu (03:42)
  • Browser Development Tools (05:01)
  • Responsive Design View (03:27)
  • New Menu Media Query (04:15)
  • Summary (00:10)
Testing & Optimzing the Design (22:14)
  • Introduction (00:10)
  • The Mobile Interpretation (02:21)
  • Legacy Browser Support (04:30)
  • Testing the Responsive Design (01:29)
  • Other Testing Options (03:57)
  • Optimizing a Responsive Design (02:46)
  • Minified JavaScript (04:00)
  • WebPagetest (02:49)
  • Summary (00:10)