HTML5 for Mobile Devices
4.6 (13 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
93 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML5 for Mobile Devices to your Wishlist.

Add to Wishlist

HTML5 for Mobile Devices

Create Flexible HTML5 That Works on Mobile, Tablet and Desktop Devices
Best Selling
4.6 (13 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
93 students enrolled
Last updated 7/2017
English
Curiosity Sale
Current price: $10 Original price: $100 Discount: 90% off
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • 21 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand the dynamics of screen size
  • How to emulate screens with Google Chrome
  • How to use the viewport meta tag
  • How to hide and display content on mobile to optimize space
  • To make content adjustments for mobile screens
  • To make adjustments in multiple column layouts for small screens
  • How to use dynamic units to make font size adjustments
  • How to determine device location
  • How to display a map
  • How to get information about the local area from Google Places
  • How to use the jQuery Mobile page metaphor
  • How to create mobile buttons with jQuery Mobile
  • Using mobile icons with jQuery Mobile
  • Working with jQuery Mobile popups
  • Using toolbars in jQuery mobile
  • Applying navbars in jQuery Mobile
  • Installing the HammarJS library for gestures
  • Detecting tap and press gestures
  • Detecting swipe and pan gestures
  • Storing data on mobile devices
  • Storing session data on mobile
  • Using HTML5's localStorage object
  • Storing a Javascript object with state using serialization
  • Understanding the cache manifest
  • Adding the cache manifest to HTML
  • Managing the manifest for offline apps
View Curriculum
Requirements
  • Successful students should know some fundamental HTML
Description

We're living in a world of multiple screens. On a typical day you might view the screen on your mobile device, your tablet, your television and desktop computer at work. Designing content that works on all size screens and optimizing for mobile previously meant writing multiple versions of your application.

However, those days are over.

Today, with a good understanding of HTML you can write your code so that it works on every size screen while taking advantage of the unique environment afforded by mobile. This course will show you how.

It's no longer enough to write HTML5 that doesn't go everywhere customers do. Increasingly, your customers are more and more mobile and your HTML5 has to have the flexibility to be displayed on any screen and the features to take advantage of the mobile ecosystem.

This course is for you if you know a bit of HTML and are looking to expand your skills in to the mobile realm. If you're a web designer or developer trying to expand your work beyond the desktop you're going to truly benefit from this excellent course.

Who is the target audience?
  • Developers and Designers moving to mobile
  • Teachers and students
  • HTML authors who want to have great looking content on any size screen
  • Graphic designers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
36 Lectures
02:17:57
+
Welcome to the Course
2 Lectures 01:28

Welcome to HTML5 for Mobile Devices.  I'll tell you what's to come in this video.

Preview 00:39

Learn a little bit about me in this short video!

Preview 00:49
+
Welcome to Mobile
4 Lectures 16:04

Welcome to this discussion of the mobile screen.

Preview 00:37

You'll learn the different ways size can be measured on the mobile screen

Preview 02:55

Using Google Chrome, in this section you'll learn how to emulate mobile screens to review content on different sized devices

Preview 04:37

In this section you'll create your first mobile HTML5 site. This is designed to be a quick start exercise-- during the reset of the course all of the techniques used will be explained.

Creating Your First Mobile HTML5 Site
07:55
+
HTML5 and CSS Coding For Mobile
6 Lectures 21:55

I'm going to preview what's to come in this chapter which details HTML5 and CSS coding in the mobile, multi-screen environment.

Preview 00:46

You'll learn how to apply the viewport meta tag in the HTML5 document head which will adjust the virtual window through which your mobile content is displayed

The Viewport Meta Tag
03:30

You'll learn how to create mobile only or desktop only content that will automatically display or hide according to device size.

Displaying and Hiding Content on Mobile
03:45

Mark will demonstrate other types of common adjustments that are made in responsive design.

Adjusting Content for Mobile Screens
05:07

Multiple Column Layouts don't work well on mobile devices. You'll learn how to adjust content so it is streamlined for mobile presentation.

Adjusting Multiple Column Layout for Mobile
04:11

You'll learn how to use dynamic units in your CSS which are more mobile friendly.

Using Dynamic Units
04:36
+
Geolocation
4 Lectures 30:17
Chapter Preview
00:42

You'll learn how to determine a Mobile Device's location using Javascript

Determining Location with Javascript
08:47

Mark will show you how to use the Google Mapping API to display a map within your mobile application

Preview 06:34

You'll use the geolocation information from the Google Places API within a Mobile HTML5 page

Obtaining Local Information
14:14
+
jQuery Mobile Basics
7 Lectures 24:16

jQuery Mobile is a library that can be very, very helpful to anyone using HTML5 in a mobile environment. in this section of the course we're going to learn how to use the library.

Preview 00:58

You'll learn how to apply the jQuery mobile page metaphor to create pages that look and act like mobile applications.

jQuery Mobile Page Metaphor
04:54

Create mobile friendly buttons using jQuery

jQuery Mobile Buttons
03:33

Mobile iconography helps communicate with users in a standard way. You'll learn about jQuery Mobile icons in this section

jQuery Mobile Icons
03:45

jQuery Mobile allows you to standardize popups so they look more like true mobile application popups

jQuery Mobile Popups
05:33

Enhance your headers and footers by embedding content directly in to them.

jQuery Mobile Toolbars
02:39

Mobile navigation can be tricky. Using jQuery Mobile's navigation bars can make mobile navigation more usable

jQuery Mobile Navbars
02:54
+
Working with Gestures
4 Lectures 15:53

Gestures allow the user to interact with a mobile device through taps, swipes, slides and pans.  You'll learn how to code these in this section.

Preview 00:34

You'll be introduced to the Hammer.js library.

The Hammer.js library
02:08

Learn how to work with tap and press gestures in Hammer.js with HTML5

Taps and Presses
07:14

Learn how to work with swipes and pans gestures in Hammer.js with HTML5

Swipes and Pans
05:57
+
Storage
4 Lectures 19:28

Sometimes in development you'll want to store data only for the length of the session. You'll learn how in this video.

Storing Session Data
06:57

Local storage lets you (more or less) permanently store data on the user's device that is retrievable only by your app/domain.

Storing Local Storage Data
04:26

By serializing objects you can store them in local storage and later retrieve them to reset application state.

Storing Object and State
07:29
+
Offline Apps
5 Lectures 08:36

You'll learn how to create a cache manifest to determine which files are available offline

The Cache Manifest
03:36

You'll learn how to make the browser aware of the manifest in your HTML5 code

Adding the Manifest to your HTML
00:51

Javascript can be used to manage the maifest. You'll learn how in this video

Managing the Manifest with Javascript
03:09

Goodbye and Thanks for taking the course.  Don't forget to leave a review!

Goodbye From Mark!
00:27
About the Instructor
LearnToProgram, Inc.
4.3 Average rating
4,439 Reviews
142,954 Students
46 Courses
Learn Web, Mobile and Game Development

LearnToProgram Media is a leading publisher of web, mobile, and game development courses that are used by over 500,000 people in 65 countries. LearnToProgram's valuable network of technical resources includes content on YouTube, iTunes, and Roku, as well as books, free tutorials, and online courses.

With a mission of “teaching the world to code" LearnToProgram instructors are teachers first and technical experts second. Their primary skill is relating complex technical information to nontechnical people learning web, mobile and game development. The entirely online, self-paced sales model allows students to learn at their own pace.

With over 40 courses on the market, LearnToProgram offers students flexible programs in web development, mobile application development and game development. Currently the company's most popular online courses include Become a Certified Web Developer and 10 Apps in 10 Weeks.

The company is based outside of Hartford, Connecticut.