App Making Guide

On this page I hope to share my experience of making iPod/iPhone apps with upper primary/elementary children. No particular expertise is required to get started. All software required is freeware. Additionally, there are a lot of excellent free resources available to help you.

Click here for the Learning 2.013 conference quick start guide.

Different ways to make an app

Apps for Android and Apple devices are made professionally using the software development kit (SDK) provided for each platform. Apps made this way are called 'native apps'. Not only are the knowledge and skills required to use SDKs out of the reach of primary schools, native apps for Apple devices can only be put onto the device via Apple's App Store, (unless the device has been 'jailbroken'), and not all apps are accepted for the store.

Other software environments can be used to make native apps, most notably App Inventor for Android. App Inventor uses snap together blocks of code similar to the Scratch programming environment for children. Apps made with App Inventor can be put straight onto you own Android devices, and with some jiggery-pokery can be put onto App Market from where people all over the world can download them. (I was amazed that my test app, Fast Ukeule Tuner, which I made this way has already been downloaded over 10,000 times!). App Inventor might possibly be used with upper KS2 children who have a very firm grounding in using Scratch software.

There are a number of online services that will allow you to make apps for different platforms. Although these are largely template driven, they do allow for a degree of innovative design and some will allow you to build in a degree of interactivity. Although they will allow you to make a working app relatively simply, they are not free, and making apps this way does not put the creator truly in charge. The learning is less and the skills learned aren't particularly transferable.

To my mind, the best way to make apps for mobile devices is not to build native apps at all, but to make web apps. Web apps appear on your device just like native apps. They are launched on iPods/iPhones by tapping an icon like any other app and appear like any other app but are actually web pages running in the internet browser without displaying any of the tool or navigation bars. Making web apps has a number of advantages. They can be made to work on all platforms and devices and can easily be installed on those devices. But, most importantly, they are reasonably straight forward to make, using skills that are increasingly important and transferable.

The process of building a web app from scratch is built upon two main skill sets. First the children need to learn to design a simple web page by coding it with html, and then need to learn how to style it using css. These skills are well within the reach of KS2 children and there are lots of super online resources available to help such as and the ultra-fun Children will also need to be able to edit images to make their own icons and splash screens. With these skills the children can make a simple working website which they can then edit by adding a few special lines of code that will make it function as an app when loaded onto the chosen device. The apps could be made to be interactive (e.g. a unit converter) by learning a very little javascript, or could be built around fantastic 2D games made using the excellent and free Construct 2 software. You don't need any particular knowledge to get started making web apps. I did most of my learning alongside the children.

Getting Started - making web pages with html and css

The main skills involved in learning to make an web are to build a web page using html and to style it with a css stylesheet. These will undoubtedly be useful skills for your children for some time into the future. Using a WYSIWYG editor (such as Kompzer or FrontPage) for designing a web page is quick and easy but I would advise against it for this project. If children don't first learn to design with html alone, they will never have a thorough understanding of how web pages work. For this excercise, using a WYSIWYG designer would take control from the children and also produce messy html code that is harder to follow and edit.

A good text editor programme for composing web pages and stylesheets is essential. I'd very much recommend using the free and excellent Notepad++. Once Notepad++ is loaded, select html from the language menu and begin typing to start making a web page. If the correct language is chosen, it will automatically save with the file extension .html which will ensure that it opens in your web browser when double clicked. To edit an existing page, right click and choose 'Edit with Notepad++'.

The Code Academy website( is an excellent resource to use for both learning html and css. It contains a number of interactive courses submitted by users that allow learners to practice their skills as they learn. There is the option to log in and keep a record of progress or you can jump in at any point without registering. After a few beginner lessons on html and a few beginner lessons on using css to make a stylesheet, children should be able to have a go at making their own simple web page comprising images, headings, links and text. Here's a couple of pages I knocked up to help them (click to download):

At this stage of the process, children will be learning an enormous amount. They should be given plenty of opportunity to experiment and develop web pages of interest to them. I would definitely recommend using the excellent resources at This is the organisation responsible for setting html and css standards. Their website contains excellent clear and interactive excercises for learning how to use different elements. More able children should be able to independently explore the website learning new techniques.

By now children should have learned how to design and style web pages by hard coding them. This is a major amount of learning and a very worthwhile goal in itself. Perhaps you could consider setting this as the target to achieve for one term, and then consider whether or not to later take the next steps - re-editting to work as web apps, and designing an icon and splash screen.

Making Web Pages into Apps

The first consideration needs to be to style a web page so that it works at both iPod/iPhone portrait and landscape orientations (i.e 320 x 460px and 460 x 320px). Consideration needs to be given to style elements such as images with fixed widths or a percentage, so that they resize automatically when the iPod/iPhone is rotated. We used Google Chrome for testing our pages with the Window Resizer extension to quickly test how our pages would look in both orientations.

Next the pages need to be served as an app for iPod/iPhone. This is done by pasting the following html to the head of each page:

<link rel="apple-touch-icon" href="apple-touch-icon.png" /> <link rel="apple-touch-startup-image" href="startup.png" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />

This code will tell the device from where to get the icon and splash screen, set the zoom to an appropriate size; remove all navigation bars and control the appearance of the status bar. Once the a link to the web page has been saved as an icon on the springboard, when it is launched it will be full screen without the navigation bar. This makes it appear as an app, but you must ensure that all navigation is built into the pages as you won't be able to rely on the back button. Any links to other web pages that make up the app will jump out of full screen. This is fixed by pasting the following code into the top of the head of every page in the app other than the first page:

<script> (function(document,navigator,standalone) { if ((standalone in navigator) && navigator[standalone]) { var curnode, location=document.location, stop=/^(a|html)$/i; document.addEventListener('click', function(e) {; while (!(stop).test(curnode.nodeName)) { curnode=curnode.parentNode; } if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf( ) ) { e.preventDefault(); location.href = curnode.href; } },false); } })(document,window.navigator,'standalone'); </script>

Now the all the web pages in your app will appear like an app, but they will only load when the device is connected to the internet. We need to force the browser to remember the pages so that the app works offline and the files load more quickly. This is done with a text file that has the extension .appcache. You will need to make a link to the .appcache file within the html tag at the top of the html code of the first page:

<!DOCTYPE html> <html manifest="manifest.appcache"> <head>

And now to write the manifest file. Simply paste the follwing text into Notepad++ and list every page in your website. If files such as images are in a sub folder, that will have to be included as shown below. Save the file as manifest.appcache in the same folder as your web pages.

CACHE MANIFEST CACHE: index.html startup.png stylesheet.css apple-touch-icon.png page2.html images/jellyfish.jpg images/crocodile.jpg images/hornbill.jpg

Finally, to complete the app we need to make an icon and a splashscreen. The icon will appear on the springboard of the iPod/iPhone and be used to launch the app. If you don't create one, your device will use a snapshot of the home page. Simply save a suitable image 57 x 57 pixels into the website folder with the name apple-touch-icon.png. You made a reference to this location in the code in the head of the web page, but your device should look for a file of this name anyway. A simple image works best. The iPod/iPhone will round the corners for you and put a sheen on it automatically. Also you need to create a splash screen which will be shown while the app is loading in the background. This should be an image 320 x 460 pixels for iPods and iPhones up to 4G and should be saved as startup.png. If you load the app onto a device with a different viewport size such as an iPad, the app should work but the splash screen won't. We use the free image editing programme Paint.NET with the children for image editing tasks like this.

These images were created by a pupil for use with a currency converter app:

You should have as a minimum the following files with the following names in your website folder:

index.html stylesheet.css manifest.appcache apple-touch-icon.png startup.png

Warning: children should be encouraged to use lower case for all file names (and all coding) to prevent errors. File names on Windows computers aren't case sensitive and so a link to Images/Hornbill.jpg will find images/hornbill.jpg. Most web sites are served on Unix/Linux computers which are case sensitive. Additionally, your browser will search a website for the file index.html to open with. It won't accept Index.html.

Publishing your Apps

To load your app you need to be able to find it in the browser. There are two ways to go about this: serve it from your own computer or purchase internet hosting. The first is only suitable for testing one app at a time but is free. The second is very much the best and easiest solution and also costs very little.

There are a number of freeware programmes you can run on your computer that will make it act as a web server. I've used nginx-1.2.7 successfully. Download it from here and unzip it. It doesn't matter where you put it on your computer. (I've already edited this copy to add the .appcache mime type.) Put your files in the html folder and then double-click nginx.exe to start serving your website. You can check it's running by clicking ctrl+alt+del and selecting Task Manager and then the Processes tab. There should be two entries for nginx. You can also stop nginx by ending the processes here. You should find your website on the same computer by typing localhost:80 into the browser address bar. On other devices on the same network you should be able to find it by typing in the serving computers IP address to followed by :80. To find your IP address go to start>run>cmd and type ipconfig into the command console.

As the website content is cached in the iPod/iPhone's memory referenced by website/IP address, it's only possible to serve one app at a time from each computer. This is the main reason why buying commercial hosting is better. Most hosting companies' packages include unlimited sub-domains. This means that if you buy the domain you can have sub-domains anad and as many other addresses as you wish. Each of these sub-domains is capable of hosting a separate app at the same time. I've used for hosting this site and all apps and have been thoroughly satisfied. The user has a control panel from where sub-domains can be instantly created, code and wysiwyg editors for web pages and a simple file manager for uploading files to your webspace. (For faster and more flexible uploading of multiple files use a dedicated ftp programme such as Filezilla

Installing your Apps

Once your apps have been uploaded to their own sub-domain, they are ready to be installed on your iPod/iPhone. Click Here for instructions on how to do this. Once the app has been added to the home screen and launched you will need to browse the app whilst online so that the browser can download and cache all the content as directed by the manifest.appcache file. You can check that this has been successful by going to Settings>Safari>Advanced>Website Data and checking for your sub-domain in the listing.

That's it!

I've run this projcet with a number of Year 6 & 7 classes for one term. Initially, they made great progress learning html and css, and managed to wade through the rest with various degrees of success. Regardless of what apps they produced, I was very impressed by how much new knowledge they absorbed and skills they acquired along the way. In conclusion, I consider the project has been very succesful and I look forward to improving and extending it next year. The latter half of the project is where the higher and lower performers separated the most. This can be helped by supporting children with ready made apps to edit and extend. Click here to download a template for a simple web page made ready to be an iPod/iPhone app.

The project can be extended by using to learn a small amount of javascript to make the web pages interactive and thereby make a more functional app. Click here to download a template for a simple currency converter. Some classes edited this template to make their own version, changing currencies and adding more. It could also be adpated to convert, say, feet to metres. The most exciting development to simple apps made this way comes from using the free and excellent Construct 2 software. Construct 2 produces professional quality 2D games in html5 output, meaning that the children could drop super-cool games into their apps. I've started this year using Construct 2 with my Year 5 classes and am looking forward to seeing what great apps they'll make next year.