OUCH! Your browser does not support JavaScript This is a fatal error. Nothing here will work for you, not even this close button.
WARNING: your browser does not support css columns video audio . You will not be able to watch the video demonstrations.
Info: your browser does not support border-radius box-shadow embedded fonts text shadow css gradients. The presentation will not look exactly as intended and some functionality may be missing.
Internet Explorer is not recommended for this activity. Firefox 4 and higher, Chrome 18 and higher, and Opera 12 and higher work better, and have superior tools for up and coming developers.

A WebApp Starter Activity

Hide this message (Ctrl+Alt+Shift+H)
Updated 2014-03-01: This "tool" was created while I was teaching myself JavaScript, and it's an example of my own informal learning, a play-based way to spark an interest in this 21st century literacy, I hope. When you type your message in the left panel, fill out the form, press the buttons, save it as shown, and then compare the panels to see what's going on with the code it may just give you ideas to do bigger, better things.

A teacher might try this on their own first and work it into a class activity later. An individual might turn it into a report or project and get their classmates and teacher to view it on a cell phone [add video]. Comment on my blog for help or to make suggestions.

This is all part of a bigger plan See an example of a "Web App page" made with this tool here. For best results use Chrome, Safari, or Firefox 3.6+. For bad results use a Microsoft browser. If you have no choice the videos for IE9 are here because IE9 can't figure out what they are dynamically (view source, find the function that opens them for everyone else and see comments).

Press Ctrl+Alt+Shift+H to hide this. If it doesn't work, please debug it for me and send me a fix ;)


This will get you started making Web apps that behave like mobile apps.

You can watch a video for more help with the form below.   4:45

Quick start

  1. Open the template file in a plain text editor, and then save it to your project folder inside your Root WebFolder? as (File->Save As) index.html
  2. Create pages using the form below. Give each one a unique id and a title. ?
  3. type, or copy/paste code into the left panel. Visit jQueryMobile.com for more ideas and code to copy/paste.
  4. Click Make Page, then cut or copy from the right panel into index.html and save the file.
  5. View the file in your Web browser.


Graphic. Creative Commons Licence Attribution 3.0 Unported (CC BY 3.0)
Mobile WebApp Helper by Richard C. Fouchaux
is licensed under a Creative Commons Attribution 3.0 Unported License.
Permissions beyond the scope of this license may be available at rcfouchaux.ca.