Learn your way! Get started

CSS3 for Designers, Part 6: Media Query

with John Wiley & Sons

Watch trailer

Course at a glance

Release date 2/25/2015
Level Beginner
Runtime 1h 3m
Closed captioning N/A
Transcript N/A
eBooks / courseware Included
Hands-on labs N/A
Sample code Included
Exams N/A

Enterprise Solutions

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

Course description

CSS3 is the latest standard for Cascading Style Sheets and the language used to change the style of web pages and user interfaces written in HTML and XHTML, and any kind of XML document. Now, in this 6 part learning series you can learn the ins and outs of maximizing CSS3 to create professional-looking websites with expert, straight-forward, user-friendly video training. Understand how to layout web pages with CSS3, format text, work with colors and gradients, and create background images. Add design elements like shadows and borders, buttons, and navigation menus to improve the user experience, and enhance your web pages with Transforms, transitions, and animation.


This course assumes very little familiarity with CSS2 and CSS3. This course is part of 6 courses; CSS3 for Designers: Selectors and New for CC3; CSS3 for Designers: Color, Buttons, Borders; CSS3 for Designers: Navigation, Model and Layout; CSS3 for Designers: Layout, Content and Logo; CSS3 for Designers: Transformations & Animation and CSS3 for Designers: Media Query. Please be sure to view the courses in order if you are new to the material.

Meet the

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

Media Query

Media Queries (13:13)
  • Introduction (00:08)
  • Media Queries (04:21)
  • Vocabulary & Components (04:41)
  • More to Consider (03:54)
  • Summary (00:08)
Coding Media Queries (28:54)
  • Introduction (00:08)
  • Media Query - Break Pt 320px (04:55)
  • Break Pt 320px - Image, Footer (05:03)
  • Break Pt 320px - Tweak, 480px (04:06)
  • Break Pt 480px - Footer, 768px (04:47)
  • Break Pt 640px (03:12)
  • Break Pt 1024px (03:41)
  • Break Pt 1024px - Tweak (02:50)
  • Summary (00:08)
More Media Query Coding (21:24)
  • Introduction (00:08)
  • Edit Index Page (05:05)
  • Mobile Menu (04:24)
  • Navigation Block (04:45)
  • Hover Effects (02:54)
  • Testing the Menu (03:58)
  • Summary (00:08)