Responsive Web Design Training

  4.6 out of 5 - Read Testimonials

In this Responsive Web Design training class, you will learn to use HTML5, CSS, JavaScript, and other tools to create websites that are responsive: sites that adapt their layout to the client device being used, whether it be a smartphone, tablet computer, or desktop computer/laptop. You will learn to use CSS media queries, mobile-friendly HTML5 features, JavaScript enhancements, and various frameworks to build websites that look as good on an iPhone or Android as they do on a desktop or laptop computer.


Public Classes: Delivered live online via WebEx and guaranteed to run . Join from anywhere!

Private Classes: Delivered at your offices , or any other location of your choice.

  1. Learn how one website can respond to the specific needs of the environment on which it is being viewed, presenting a layout that is equally - and differently - appropriate for mobile, table, and desktop devices.
  2. Learn to leverage the capabilities of HTML5 to present mobile-friendly sites, and understand the varying levels of support for some features among different devices.
  3. Understand how to use CSS Media Queries to display content modified to fit the client device.
  4. Understand the GeoLocation API and use it to integrate the user's location into websites.
  5. Integrate video and other media appropriately for mobile devices.
  6. Learn how to use the jQuery Mobile framework to add support for touch and other gestures.
  7. Learn how to use the Bootstrap framework to abstract low-level responsive coding and to create grid-based layouts.
  1. Designing for Mobile
    1. Responsive Design: Good for All Devices
    2. Why It's Worth It
    3. Building Responsive Sites
    4. Flexible Grid
    5. Flexible Images
    6. Media Queries
    7. Frameworks
    8. Further Reading
  2. Flexible Grids
    1. The Flexible Grid: A More Responsive Layout Strategy
    2. The Case for Flexible
    3. Case Study: The Jazz Calendar Site
    4. A First Complete Jazz Calendar Draft
    5. Making the Inflexible Flexible
    6. A Better Jazz Calendar
  3. Flexible Images and Other Media
    1. Improving the Jazz Calendar Site
    2. Flexible Background Images
  4. The Viewport and Media Queries
    1. The Viewport
    2. Targeting Widths and Devices with CSS3 Media Queries
    3. Linearizing the Layout
    4. Using max-device-width
  5. HTML5: Mobile Specific Forms
    1. A Jazz Calendar Registration Form
    2. Local Storage
    3. Local Storage Example
  6. GeoLocation API
    1. The GeoLocation API
    2. How It Works
    3. Browser and Device Support
    4. JavaScript Implementation
    5. A Simple Example
    6. Google Maps
    7. Jazz Calendar: Finding Nearby Gigs
  7. Home Screen Icons
    1. Home Screen Icons
      1. iPhone/iPad
    2. A Home Screen Icon for the Jazz Calendar Site: iOS
    3. Apple-Specific Meta Tags
    4. Android-Specific JSON Manifest
    5. A Home Screen Icon for the Jazz Calendar Site: Android
    6. Exercise 12: Adding Home Screen Icons to the Pickup Soccer Site
  8. Accelerometer
    1. Using the Accelerometer
  9. Video
    1. Optimizing the Video Experience for Mobile
      1. Optimizing for Mobile
    2. Embedding from YouTube or Vimeo
    3. Hosting Your Own Videos
    4. Video Formats
    5. Controlling the Video through JavaScript
    6. Converting Video Formats
    7. Further Reading
  10. jQuery Mobile
    1. Mobile Focus
    2. Supported Platforms
    3. The Basics
      1. The Page Model
      2. UI Elements
    4. A First Example
    5. Drag-and-Drop Code Builder
    6. Gestures
    7. Swiping to Change Pages
    8. Using data Attributes
    9. Handling Orientation Change
    10. What about Desktops?
  11. Mobile Menus
    1. Mobile Menus
    2. A First Example
    3. Slicknav: A Mobile Menu jQuery Plugin
  12. The Bootstrap Framework
    1. Bootstrap: A Responsive Framework
    2. Downloading Bootstrap
    3. Bootstrap's Grid
    4. Bootstrap Components
    5. A First Example
    6. A Bootstrap Layout for Jazz Calendar
Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this Mobile Web class:

  • HTML 4
  • Basic CSS
  • Basic JavaScript

Experience in the following would be useful for this Mobile Web class:

  • HTML5
  • CSS3
  • jQuery and other more advanced JavaScript topics
Prerequisite Courses

Courses that can help you meet these prerequisites:

Follow-on Courses

Training for Yourself

$1,150.00 or 2 vouchers

Upcoming Live Online Classes

  • See More Classes

Please select a class.

Training for your Team

Length: 2 Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors

What people say about our training

Class was well taught and the materials were easy to access. The Webucator interface made it easy to follow along. The examples files provided make it easy to use as a reference when back at the office.
Lisa Elizondo
The instructor was very knowledgeable with real world work experience in the areas taught.
James Ting
Texas Instruments
Great introduction and overview of HTML5.
Dan Lawless
The Introduction to PHP class gave me a good foundation for exploring PHP further. The instructor is terrific!
Karen Schwartz
college of william & mary

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing


Students who have taken Instructor-led Training


Organizations who trust Webucator for their Instructor-led training needs


Satisfaction guarantee and retake option


Students rated our Responsive Web Design Training trainers 9.30 out of 10 based on 30 reviews

Contact Us or call 1-877-932-8228