Learn How To Create Mobile Apps With HTML5

Outline wireframe for a mobile beer or bird list app, showing a main list and a new entry flow with title, description, transcription, photo, and location fields, plus detail view.

Explore how HTML5 features elevate a wireframe into a web app by using online status, microphone transcription, camera capture, and geolocation with a maps service to record where users were.

Learn how to work with the code samples by navigating the command line, setting up a project folder, installing npm packages, and running a local server with grunt serve.

Set up your html5 web apps project, navigate the code folder with a text editor and command line, and run a local server to see a bootstrap-based list page.

Add a new item view with a form for title, description, voice transcription, and photo upload, plus online status and cancel and submit controls, all on one html page.

Extend the form by converting the description to a textarea, reuse the form group with id and name, and add transcribe and upload photo buttons with cancel and submit controls.

Add a detail view for list items using Bootstrap list group, displaying title, description, image, and location with back and edit buttons, and verify server and wireframe alignment.

Hook up JavaScript to toggle views with a view switcher, wiring the add item button, cancel button, and back to list button to show detail and item detail views.

Learn to toggle mobile app views with HTML5 by implementing a reusable hide show function using event objects, data attributes, and active classes to switch between list and detail views.

Clean up the app layout by repositioning the online indicator to header, placing the add button beneath it, applying a clear fix Bootstrap class, and refining item views with tweaks.

Learn how local storage persists data per origin in the browser, inspect and manipulate it with dev tools and the console, compare to cookies, and test support using modernizer.

Learn how to create a data fixture in the browser console to render a list using json, with an array of items containing title, description, image, and nested location coordinates.

Learn how to store and retrieve JSON data in local storage by converting objects to strings, parsing them back, and testing in the browser console using dev tools.

Install handlebars with Bouwer to render data via templates and keep HTML and JavaScript separate; then verify by starting the grunt server.

Create a simple Handlebars template in a script tag, render two strings from example data, compile it, and append the result to the DOM using main.js.

Render a list from data stored in local storage using handlebars templates, injecting each item's title into the DOM with a single script tag and a template-driven loop, reducing JavaScript code.

Learn to switch from a data list to a detail view by creating a reusable render template function, adopting naming conventions, and rendering templates with dynamic data on page load.

Fetch the correct data for the detail view using the object ID to pull the single item. Render it with a handlebars template and append to the DOM.

Navigate from the list to the detail view and back, identify and fix duplicate lists by switching template rendering from append to innerHTML, and organize templates by moving scripts.

Delete the data fixture and enable adding items via a UI, storing entries in local storage, and organize code with event listeners while rendering updates through Handlebars templates.

Learn to edit items in a list by wiring an edit button to an item detail view, pass item ids, render the edit form, and save updates with local storage.

Illustrates handling a first-time user with an empty list using handlebars, showing a friendly no items here yet message and testing with local storage.

Develop a cross-browser get user media feature test to enable camera and microphone access in web apps, handling vendor prefixes and providing user feedback.

Learn to access the user's camera using HTML5 getUserMedia, display the live video in a video element, and capture a still image with a canvas, within a web app.

learn to access the camera, capture a still image, render it to a canvas, convert to a data URL, and save it to local storage in a mobile html5 app.

builds on the getting and saving the image code to display and edit an image in the item detail view, enabling photo upload via camera and reusable functions.

Explore how to monitor network status using the navigator online property, test it in dev tools, and use online/offline awareness to inform users and control syncing.

Write simple JavaScript functions to detect and display network status, updating the UI when online or offline. Use an event listener to reflect status changes with text and color indicators.

Explore how geolocation works in a browser by testing navigator.geolocation with the console, retrieving current position, and inspecting the coords object for latitude, longitude, and time stamp.

Record the user’s current location for a new entry by using get current position, a geolocation callback, and a Handlebars template to render the location in the add item template.

Save the current location data with a title, description, and image, parse the location string back to an object, and persist it in local storage for use in templates.

Learn to display an item's store location in detail and edit views using Handlebars to render latitude and longitude, with guidance on running the server and using code samples.