Enter your Sign on user name and password.

Forgot password?
Sign In | Subscribe

Learn how to build a website using the jQuery Mobile framework designed specifically for cross-platform touch-based mobile devices. Adobe Certified Instructor Candyce Mairs will help you utilize the lightweight code, unique theme base, and built-in features of jQuery Mobile to get your mobile website quickly up and running. Along the way, you will also learn to work with jQuery Mobile plugins to create exciting slideshows and add Twitter feeds to your pages. Candyce has been in the training industry since 1994, is a Certified Internet Webmaster (CIW) Master Designer and Instructor, and also holds Adobe Certified Instructor and Expert certifications in Fireworks, ColdFusion, Acrobat, and Contribute.

Table of Contents

expand all   collapse all

I. Becoming Familiar with Mobile Websites

  What Is a Mobile Website? 6:11
  Exploring the Travel Adventures Mobile Site: iPad 2 5:19
  Exploring the Travel Adventures Mobile Site: Mobile Phone 4:42
  What Is jQuery Mobile? 4:27
  jQuery vs. jQuery Mobile 4:54
  The Supported Platform Grading System 4:38
  jQuery Mobile Files and Versioning 9:08

II. Dreamweaver CS6 Course Setup

  Setting Up the Course Files for Dreamweaver 3:18
  Setting Up a Local Site 10:27
  Dreamweaver jQuery Mobile Starters 8:11
  jQuery Mobile Support in Dreamweaver CS6 4:59

III. Other HTML Editor Course Setup

  Setting Up the Course Files Without Dreamweaver 5:55
  HTML Editor Setup 4:08

IV. Creating Pages

  HTML Pages vs. jQuery Mobile Pages 6:55
  Planning Your Site 4:22
  Creating a jQuery Mobile Page 3:38
  The Elements of a jQuery Mobile Page 5:25
  Understanding Page Code 5:27
  Adding a Page 6:03
  Loading and Transitioning Mobile Pages 5:02

V. Adding Content

  Attaching an Additional Style Sheet 4:19
  Working with List Views 5:28
  Setting Up Pages 6:06
  Categorizing Lists Using Dividers 9:20
  Adding Count Bubbles 4:52
  Adding the Back Button 12:15
  Adding Footer Navigation Buttons 9:33
  Adding Footer Navigation on All Pages 3:56

VI. Styling Content

  Previewing on a Phone 2:43
  Previewing on a Tablet 2:42
  jQuery Mobile Built-In Themes 5:36
  Changing Content Themes 7:41
  Completing the Website Styling 6:29

VII. Setting Up jQuery Mobile Plug-Ins

  What Is a Plug-In? 3:54
  Downloading the PhotoSwipe Plug-In 6:12

VIII. Building the Photo Gallery

  Creating the Gallery Page 8:08
  Adding the PhotoSwipe Coding 9:59
  Setting up the Page Sections 9:43
  Adding the Gallery Pages 7:41
  Adding Gallery Navigation Buttons 7:50
  Correcting the PhotoSwipe Structure 4:39
  Fine-Tuning the Photo Gallery 8:44
  Viewing on the iPod Touch 3:24

IX. Adding a Twitter Feed

  Adding a Feed Page 8:02
  Adding a Twitter Widget 10:23
  Testing on an iPad 2 6:11

X. Final Touches

  Adding the Final Touches 8:01
  Adding Images and Icons 9:10
  Correcting for Photoswipe Images 9:19
  Final Testing on an iPhone 2:31
  Final Testing on a Tablet 2:59
  Final Testing on a Windows Phone 3:38

Please sign in to participate in this lecture discussion.

OR Create Account

Enter your Sign-on user name and password.

Forgot password?

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.

Use this form or mail us to .

For support articles click here.