HTML5 Mobile Apps: Create an App for iPhone, iPad & Android

Name: HTML5 Mobile Apps: Create an App for iPhone, iPad & Android
Rating: 3.1 (22 reviews)

Learn how to create an App, upload it to the App stores & make money with mobile ads. No coding experience needed!

Created byKieran Moloney

Last updated 1/2015

English

English [Auto],

What you'll learn

Setup and install the app development environment in Intel's XDK App Development Tool
Create a new project in Intel XDK
Using the Virtual Device Emulator within Intel XDK
Design an App User Interface with Custom Colors and Logos with HTML & CSS
Design a professional custom App icon for iPhone, iPad and Android
Design a professional custom App start-up splashscreen for iPhone, iPad and Android
Create a navigational menu with menu items
Create a a social media sharing feature to enable people share the app with their friends on social media
Create a Javascript Google Map with markers and popup Info Windows using the Google Map API
Create a contact page with one-touch email and call triggering
Create a dynamic news feed from a JSON file stored within Dropbox
Dynamically add new news items to update the app's news feed in real-time
Create multiple required screenshots for App Store listings
Setup up a Google Admob account and generate Ad Unit IDs
Integrate Interstitial and Banner Advertising using Javascript
Utilize Cordova and Third-Party Plugins in Intel's XDK
Configure Build Settings such as bundle ID and app version in Intel's XDK
Create a Provisioning Profile for iOS
Create the finished App bundle for Android and iOS using Intel's XDK
Understand the requirements for publishing an App successfully on the Google Play Store and Apple App Store
Upload an App to the Google Play Store and Apple App Store

Course content

5 sections • 25 lectures • 1h 6m total length

Introduction2:18
Set up development tools and install an HTML5 mobile app framework using HTML, CSS, and JavaScript, then build the user interface with plugins and publish to iOS and Android.
Setting up the Tools5:17
Install essential cross‑platform tools, including Intel's STK and a photo editor alternative, then set up accounts and a public Dropbox folder for project files.
Downloading the Source Code1:00
Downloading the Mobile App Framework1:21
Download and extract the mobile app framework. Copy the icon CSSA into the CSSA folder and the UI framework file into your project, then open the Intel SDK.
Creating a Project in Intel XDK0:58
Create an Intel XDK project, import your work, and rely on the index page that references CSS and JavaScript files for layout and behavior, including maps and sliding menus.

Adding Sliding Navigation Menus4:01
Demonstrates sliding navigation menus with left and right header buttons. The news feed interface uses a pre-built class to set a light gray background, reduce font size, and refresh content.
Adding Navigational Menu Items2:49
Create a fluid sliding menu by adding navigational items with icons and anchor links to the news and contact pages, using a header container div and css styling.
Customising the App Header & Logo2:30
Customize the app header and logo by editing the CSS file, replacing the default logo with a custom image or text, and applying color changes with hexadecimal values.
Designing a Custom App Icon4:45
Design a custom app icon for iPhone, iPad, and Android by styling the boilerplate background with overlaid text, resizing to multiple dimensions, and saving as PNGs.
Designing a Custom Start-up Splashscreen3:55
Design a custom start-up splash screen by selecting a background and icon, flattening and resizing images to fit all Android and iOS splash sizes before compiling.

Social Media Sharing Menu3:20
Add a right-hand social media sharing menu with Facebook and Twitter items, using Font Awesome icons, opening in new windows, and prompting app store and Google Play share dialogs.
Creating a Google Maps with Markers7:55
Create a JavaScript-based Google Maps map with markers, center on a latitude-longitude point at zoom 17, and attach an info window to the marker for click events.
Adding a Contact Page4:52
Add a contact page to the sliding menu with a contact us panel, a divider, and a 200px image scaled to 100 percent, using a ul list and 14px font.
One-Touch Call & Email Triggering Buttons2:10
Add two one-touch call and email buttons on the contact page, using tel: and mailto: links, target blank, and button-block with float-right alignment.
Dynamic News Feed with Dropbox4:27
Load a JSON file from a Dropbox folder, convert it to JavaScript objects, and render a dynamic news feed with post id, title, date, body, and image.
Alternative to Dropbox Public URL1:00
App Store Screenshots & Graphics6:27
Learn to prepare and upload app store listings for Android and iOS, including accurate screenshots in the required dimensions, using templates, Paint.NET, and browser resize tools to streamline asset generation.

Admob Account Setup and Ad Unit ID Generation1:55
Set up an AdMob account, generate banner ad unit IDs, and integrate the unique ad unit IDs into your JavaScript code to enable mobile ads in your app.
Integrating Interstitial & Banner Ads using Javascript1:26
Learn to integrate interstitial and banner ads with JavaScript by using a pre-written AdMob script, initialize ad units, position them at the bottom of the page, and save changes.

Utilizing Cordova Plugins1:31
Learn to utilize Cordova plugins and create third-party plugins to extend a mobile app, enable splash screen, contacts events, advertising banners, and one touch call features.
Configuring & Building an App Intel XDK4:44
Configure the Intel XDK environment to set app id, version, and build target; generate production provisioning profiles, add icons and splash screens, and build Android and iOS bundles for submission.
Creating an iOS Provisioning Profile4:00
Publishing your App to the Google Play Store for Android5:00
Publishing your App to the Apple App Store for iOS3:00
App Promotional Website3:00

Requirements

Basic IT skills but no coding knowledge necessary
No software needed as it can be downloaded for free!
Windows or OS X

Description

LATEST: Updated for Feb 2018

Join over 1400 students!

In this course, you will learn how to create a dynamic App for iPhone, iPad and Android with HTML5 from scratch, publish it to the App Stores and integrate Google's Admob mobile advertising into your app so that you can start making money from your App 24 hours a day, 7 days a week.

You will learn how to:

Design a Professional App Icon for iPhone, iPad & Android
Design a Professional Splashscreen for iPhone, iPad & Android
Code a Sliding Navigation Menu with Menu Items
Integrate Facebook & Twitter App Sharing
Design a Custom App User Interface
Code a Full Map with Markers & Popup Text Windows using Google Maps API
Code a Contact Pages with One-Touch Email & Call Triggering
Create a Dynamic News Feed with Dropbox
Create Required App Store Screenshots in Different Dimensions
Integrate Interstitial & Banner Advertising using Google's Admob
Utilize Cordova & Third-Party Plugins
Submit your App to the Android & Apple App Store for iPhone, iPad & Android
Create a Promotional Website & Poster For Your App

FREE Additional Materials:

App Icon & Splashscreen Bundle (over 100 variations to choose from!)
App Promotional Poster (Fully Customisable)
Complete App Promotional Website
Step-by-Step PDF Guides
Fast & friendly Support

This course includes complete working source code that I use to develop mobile apps that I charge clients more than €5000 for!

Who this course is for:

Beginner to Intermediate. No coding experience required!
People who want to make money online

HTML5 Mobile Apps: Create an App for iPhone, iPad & Android

What you'll learn

Explore related topics

Course content

Getting Setup5 lectures • 11min

Design5 lectures • 18min

Develop7 lectures • 30min

Monetize2 lectures • 3min

Publish6 lectures • 21min

Requirements

Description

Who this course is for: