Learn your way! Get started

HTML5 for Designers, Part 9: Geo and Drag/Drop

with expert John Wiley & Sons

Watch trailer

HTML5 for Designers, Part 9: Geo and Drag/Drop Trailer

Course at a glance

Included in these subscriptions:

  • Creative Design Power Pack
  • Power Pack Plus

Release date Release date 3/2/2015
Level Level Beginner
Runtime Runtime 1h 26m
Platform Platform Major browsers on Windows Major browsers on Windows Major browsers on Mac OSX Major browsers on Mac OSX Mobile Devices Mobile Devices
Published eBooks Published eBooks Included
Hands-on labs Hands-on labs N/A
Sample files Sample files Included
Exams Exams N/A

Enterprise Solutions
Enterprise Solutions

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

Course description

This nine-part learning series course teaches you how to take full advantage of the new web standard for creating rich multimedia experiences. While learning at your own pace, you’ll discover how to approach site concept creation and bring your vision from the drawing board through to full operability. Master basic skills, boost your creativity, and challenge yourself in bold new directions. Create dynamic web pages that offer a robust and interactive experience for your visitors. Code, develop, and test your websites Understand the many ways the newest version of HTML differs from previous iterations and how it can enhance your web development projects.


This course assumes a basic level of familiarity with HTML5. This course is part of 9 courses, HTML5 for Designers: Basics and Style Sheets; HTML5 for Designers: Margins, Lists and Float; HTML5 for Designers: Layouts and Navigation Bar; HTML5 for Designers: Markup and Elements; HTML5 for Designers: Input Types, JS/jQuery; HTML5 for Designers: Video, Audio, and Canvas; HTML5 for Designers: Curves and Styling; HTML5 for Designers: Fonts and Media Queries; and HTML5 for Designers: Geolocation and Drag/Drop. Please be sure to view the courses in order if you are new to the material.

Meet the expert

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

Store, Geolocation & Drag/Drop

Layout and Storage (23:10)
  • Introduction (00:10)
  • Flexible Box Layout (04:56)
  • Target Children Elements (02:08)
  • Define Ratios (05:45)
  • Defining Offline Storage (02:44)
  • Application Caching VS Offline (02:11)
  • Methods of Storing Data (01:48)
  • Browser Compatibility (03:15)
  • Summary (00:10)
Storage, Caching & Geolocation (28:24)
  • Introduction (00:10)
  • Working with Local Storage (05:01)
  • JavaScript Functions (05:12)
  • Application Caching (04:53)
  • Cache Manifest File (04:11)
  • Working with HTML5 Geolocation (01:49)
  • Get Current Position Function (02:42)
  • Show Location Function (04:13)
  • Summary (00:10)
Geolocation Continued (17:17)
  • Introduction (00:10)
  • Display User Location on a Map (03:37)
  • Map Options Object (02:33)
  • Google Gears (03:07)
  • Adding Markers to a Map (04:45)
  • Plotting Markers (02:52)
  • Summary (00:10)
Drag and Drop (17:48)
  • Introduction (00:10)
  • Drag and Drop Fundamentals (04:04)
  • Drop Zones (00:42)
  • Drag Events (01:27)
  • On Drag Start Attribute (04:13)
  • Drag/Drop Browser Differences (03:28)
  • HTML5 Canvas Element (03:31)
  • Summary (00:10)