single-file-apps

A few examples of how a single HTML file can be an easy and powerful way to teach programming and build apps.

Goals

• Create some fun and useful examples of the power of HTML5
• Enable rapid iteration by eliminating tooling such as frameworks and preprocessors.
• Emphasize simple and extensible apps for the purpose of teaching and learning.

Assumptions

• The entirety of the app is within a single HTML file.
• The app can be launched by opening the file from the desktop and does not require it be served by a webserver.
• Any external resource references (e.g., images) are to globally accessible URLs, and do not assume a relative path, which would require a local server.

Let's Play

A good first step is to Explore the Gallery and see if any of the example apps look interesting or useful.

Copy the Example

These apps are intended to be copied and used as starting points for your own ideas. The easiest way to do this is to run one the apps from the Gallery and then use your browser's Save As… command to save the HTML Source to your computer's desktop (TBD, what to do if someone has a mobile device like an iPad)

Experiment, Iterate, Evolve

Show and Tell Time

The single-file format is intended to support rapid iteration and evolution and learning; however, you will eventually want to publish your example and show it off to your friends and the world.

Using GitHub Pages

Using Netlify

Using Glitch

And Many More