Discover Classes. Earn Rewards.
Developing Mobile Websites w/ Responsive Web Design is unfortunately unavailable

Thankfully we have 3 other jQuery Classes for you to choose from. Check our top choices below or see all classes for more options.

Developing Mobile Websites w/ Responsive Web Design

at Hands On Technology Transfer, Inc. - Chelsea

Course Details
Start Date:

This class isn't on the schedule at the moment, but save it to your Wish List to find out when it comes back!
If you're enrolled in an upcoming date, this simply means that date has now sold out.

Chelsea, Manhattan
(Exact location to be announced)
New York, New York
Purchase Options
Save to WishList

7 people saved this class

Book Private Class
Class Level: Beginner
Age Requirements: 18 and older
Average Class Size: 8

Flexible Reschedule Policy: This provider has flexible, free rescheduling for any-in person workshop. Please see the cancellation policy for more details

What you'll learn in this jquery training:

Developing Mobile Websites with Responsive Web Design and jQuery Mobile

All HOTT courses are available face-to-face, remote-live, on-demand or on-site at your facility

This hands-on course conveys the fundamental skills necessary to design and build responsive web sites for mobile devices such as phones and tablets. Attendees will use responsive web design (RWD) techniques such as CSS3 media queries and flexible layouts to build mobile-compatible web sites. Students will learn how to test mobile websites using emulators and simulators.

The course also provides an extensive introduction into using the jQuery Mobile Framework for building mobile-specific web sites. Students will learn how to use jQuery Mobile widgets to create forms, lists, toolbars and collapsible blocks. Students will also learn how to integrate SOA with a mobile web site including working with RSS feeds, Google Maps integration and implementing server-side data access.

Attendees will use ThemeRoller for jQuery Mobile to download existing or custom theme swatches to format the appearance of a web site. Additional topics include responding to user events, configuring jQuery Mobile defaults and using page transitions. Comprehensive hands on exercises are integrated throughout to reinforce learning and develop real competency.

Course Prerequisites

Prior knowledge of HTML, CSS, JavaScript and jQuery equivalent to attending the Website Development with HTML5, CSS and Bootstrap, JavaScript Programming and jQuery Programming courses.

Course Overview

Overview of Responsive Web Design

  • What is the Mobile Web?
  • Defining Responsive Design
  • Responsive Web Design (RWD) Principles
  • Responsive Layout vs. Adaptive Layout
  • Designing for Mobile First
  • Progressive Enhancement

Viewport and Media Queries

  • Working with Viewports

          - viewport Meta Tag

          - @viewport Rule

  • CSS3 Media Queries

          - Media Types

          - Logical Operators

          - Media Features

                 - Browser Height and Height

                 - Device Height and Height

                 - Orientation

                 - Resolution

  • Determining Breakpoints
  • Installing and Using Viewport Testing Tools

Creating Responsive Layouts

  • Fluid Grid Layouts

            - Calculating Fluid Grid Layouts

            - Predefined Grid Systems

  • Creating Flexible Images and Video
  • Optimizing Images for Retina Displays
  • Responsive Typography

            - Using Ems, Percentages and Rems

            - Viewport Units

  • Responsive Navigation Patterns
  • Designing Responsive Tables
  • Creating a Responsive HTML5 Page

Overview of jQuery Mobile

  • What is jQuery Mobile?
  • Configuring and Downloading the Mobile Library
  • jQuery Mobile File Structure
  • Working with HTML5 data-Attributes
  • jQuery Mobile Page Structure

Overview of the jQuery Mobile CSS Framework

  • Explanation of Themes and Swatches

           - Applying the "a" and "b" Swatches

  • Using the data-theme Attribute
  • Overview of jQuery Mobile Intrinsic Classes
  • Using ThemeRoller for jQuery Mobile

           - Exploring the ThemeRoller UI

           - Upgrading Existing Themes

           - Defining Custom Swatches

           - Downloading and Applying a Custom Theme

Creating jQuery Mobile Pages

  • Overview of the Page and Pagecontainer Widgets
  • Using Single-Page vs. Multi-Page Templates
  • Prefetching Pages
  • Caching Pages in the DOM
  • Configuring the Loader Widget
  • Navigating Between Pages

            - Using Page Transitions

            - Ajax-Driven Page Navigation

            - Hash-based Navigation

  • Displaying Pages as Dialogs

Adding Content to a Page

  • Adding Specialized Hyperlinks

            - Maps

            - Email

            - Phone

  • Integrating with Web Services
  • Making Ajax Requests
  • Displaying XML Content
  • Displaying JSON Content
  • Working with Multimedia
  • Organizing Content with Grids
  • Creating Responsive Grids

Using jQuery Mobile Widgets

  • Examining the Widget Factory

           - Instantiating a Widget

           - Calling Widget Methods

           - Setting Widget Options

           - Registering Widget Events

  • Configuring Widget Options using JavaScript
  • Using the data-role Attribute to Create a Widget

Adding Toolbars to a Page

  • Adding Headers and Footers
  • Positioning Toolbars

           - Inline

           - Fixed

           - Fullscreen

  • Auto-Generated and Customized Back Buttons
  • Adding Content to Toolbars
  • Using the Navbar Widget
  • Persisting Toolbars Across Pages

Working with List Views

  • Creating Lists with List Views

            - Read-only

            - Interactive

  • Creating Numbered Lists
  • Creating Inset and Non-Inset Lists
  • Formatting List Content

             - Adding Images to Lists

             - Creating Split Buttons

             - Creating Count Bubbles

  • Working with Nested Lists
  • Defining a Filterable List

Working with Forms

  • jQuery Mobile Form Requirements
  • Form Auto-Enhancements

            - Textinput Widget

            - Checkboxradio Widget

            - Selectmenu Widget

            - Slider Widget

            - Rangeslider Widget

  • Creating Accessible Forms
  • Defining Field Containers
  • Grouping Controls with the Controlgroup Widget
  • Adding Input Fields

            - Single-line and Multi-line Text Fields

            - Email, Telephone and Search Fields

            - Checkboxes and Radio Buttons

  • Working with Select Menus

           - Native Select Menu

           - Custom Select Menu

                  - Allowing Multiple Selections

                  - Disabling Menu Options

                  - Adding Placeholders

  • Using a Slider for Numeric Input

           - Controlling a Slider's Appearance

           - Using Slider Events

  • Selecting a Range of Values with Rangeslider
  • Creating a "Flip" Switch

Working with Buttons

  • Creating Buttons

           - Using the <a> Tag

           - Using the <input> Tag

           - Using the <button> Tag

  • Defining Inline Buttons
  • Creating Button Groups
  • Configuring Buttons with Attributes and CSS Classes
  • Formatting Buttons

            - Native Buttons

            - Inline Buttons

            - Adding/Removing Rounded Corners

            - Theming Buttons

            - Adding/Removing Drop Shadows

            - Minifying Buttons

            - Adding Icons

Responding to Events

  • Registering Event Handlers
  • Comparison of ready and pagecreate Events
  • Introduction to Page Events
  • The mobileinit Event
  • Registering Events in jQuery Mobile

           - Touch/Swipe

           - Orientation Change

           - Scroll

           - Virtual Mouse Events

           - Widget-specific events

           - Slider Widget

           - Tabs Widget

           - Collapsible Widget

Integrating JavaScript and jQuery Mobile

  • Configuring Default Settings Using the $.mobile Object

           - Enabling Ajax

           - Setting Default Page Transitions

           - Preventing Transitions

           - Preventing Auto-Enhancement

           - Customizing Error Messages

  • Storing and Removing Arbitrary Data

           - Working with URLs

           - Performing a Silent Scroll

  • Loading and Changing Page Content Dynamically

Creating Popups

  • The Popup Widget
  • Positioning Popups
  • Dismissing a Popup
  • Adding a Close Button
  • Modal Popups
  • Using Popups for Tooltips
  • Embedding Content in Popups

           - Images

           - Video

           - Iframes

  • Theming Popups
  • Using Popups for Navigation
  • Displaying Popup Transitions
  • Reusing Popups on Multiple Pages

Adding Panels

  • Using the Panel Widget
  • Setting a Panel's Position
  • Setting the Display Mode

           - Reveal

           - Overlay

           - Push

  • Opening and Closing Panels
  • Creating the Open Button
  • Controlling Close Behavior
  • Adding Fixed Panels
  • Making Panels Responsive
  • Reusing a Panel on Multiple Pages
  • Updating a Panel Dynamically
  • Displaying Pages as Dialogs
  • Dialog Overview
  • Customizing a Dialog

           - Adding a Close Button

           - Theming

  • Linking to the Dialog
  • Chaining Dialogs Together
  • Displaying Dialog Transitions

Creating a Tabbed Interface

  • Using the Tabs Widget
  • Creating Content Panels
  • Defining the Tabs

           - Navbar

           - Listview

           - Buttons

  • Configuring the Tabs Widget

           - Customizing Options

           - Handling Tab Events

           - Loading Content with Ajax

Creating Responsive Tables

  • Using the Table Widget
  • Overriding CSS Classes
  • Reflow Table Mode

           - Applying the ui-responsive Class

  • Column-Toggle Table Mode

           - Prioritizing Columns

           - Customizing the Columns button

           - Customizing the Appearance of the Column Picker Popup

Adding Collapsible Content

  • Using the Collapsible Widget
  • Controlling a Collapsible's Appearance

            - Adding a Theme

            - Using Custom Icons

            - Minified and Inset Collapsibles

  • Opening a Collapsible by Default
  • Nesting Collapsibles
  • Opening/Closing Programmatically
  • Creating Groups of Collapsibles

Making Content Filterable

  • Using the Filterable Widget
  • Defining a Search Field
  • Using "Reveal"
  • Using a Remote Data Source
  • Filtering on Alternative Text
  • Controlling Filterable Items
  • Defining a Custom Filter Function

Web Services Integration

  • Working with RSS Feeds
  • Google Maps Integration
  • Server-Side Data Access

Remote Learning

This course is available for "remote" learning and will be available to anyone with access to an internet device with a microphone (this includes most models of computers, tablets). Classes will take place with a "Live" instructor at the date/times listed below.

Upon registration, the instructor will send along additional information about how to log-on and participate in the class.

What you'll cover in the free info session:

Still have questions? Ask the community.

Refund Policy
Tuition includes all course materials. Students may withdraw before the second day of class to receive a 100% refund, provided course materials are returned to the instructor. Prorated refunds may be granted for withdrawals after the first day.

Cancellations and Changes: There are no cancellation fees.

Attendance Requirements: Students must attend each day of a course and successfully complete hands on exercises in order to receive a certificate of completion. If a student wishes to retake any portion of a class that he or she completes, the student may do so within 12 months at no extra cost.

Intended Audience: Hands On Technology Transfer, Inc., provides IT training designed for technology professionals who wish to quickly upgrade their computer skills. In most states, the employer bears all training costs.


Google Map

Hands On Technology Transfer, Inc.

All classes at this location

Start Dates (0)

This class isn't on the schedule at the moment, but save it to your Wish List to find out when it comes back!

Similar Classes

Benefits of Booking Through CourseHorse

Booking is safe. When you book with us your details are protected by a secure connection.
Lowest price guaranteed. Classes on CourseHorse are never marked up.
This class will earn you 27950 points. Points give you money off your next class!
Questions about this class?
Get help now from a knowledge expert!
Questions & Answers (0)

Get quick answers from CourseHorse and past students.

Reviews of Classes at Hands On Technology Transfer, Inc. (7)

School: Hands On Technology Transfer, Inc.

Hands On Technology Transfer, Inc.

HOTT delivers instructor-led technical training across the United States, Canada and the United Kingdom. Whether you attend in person, remote-live or on-demand, our classroom-based training philosophy zeroes in on your ability to work more productively and with higher quality results after training....

Read more about Hands On Technology Transfer, Inc.

CourseHorse Approved

This school has been carefully vetted by CourseHorse and is a verified NYC educator.

Want to take this class?

Save to Wish List
Booking this class for a group? Find great private group events here

3 Top Choices

JavaScript Crash Course (Ages 13-18)

This class is temporarily being offered remotely.

at Upperline School of Code - Virtual Classroom

Dive in to web development! This class, designed for students with little or no coding experience, covers the core principles of building websites using HTML, CSS and basic Javascript. In this whirlwind week, students will gain exposure to the building blocks of the web using the tools and skills that real-world developers use on a daily basis. The...

Monday Jul 27th, 9:30am - 3:30pm Eastern Time

  (5 sessions)

5 sessions

jQuery Fundamentals

This class is temporarily being offered remotely.

at Certstaffix Training - Largo 1300 Caraway Ct Ste 200, Largo, Maryland 20774

In this jQuery course you will learn about: JavaScript essentials for jQuery users, jQuery essentials, jQuery UI essentials, Ajax, JSON, and APIs and jQuery Mobile. Who Should Attend: This course works especially well for people with some programming experience. That includes: web developers who have done some JavaScript programming but are new...

Wednesday Aug 26th, 10am - 5pm Eastern Time

  (3 sessions)

3 sessions

jQuery Fundamentals

at Certstaffix Training - Flatiron 276 5th Ave Ste 704, New York, New York 10001

In this jQuery course you will learn about: JavaScript essentials for jQuery users, jQuery essentials, jQuery UI essentials, Ajax, JSON, and APIs and jQuery Mobile. Who Should Attend: This course works especially well for people with some programming experience. That includes: web developers who have done some JavaScript programming but are new...

Wednesday Aug 26th, 10am - 5pm Eastern Time

  (3 sessions)

3 sessions