Create Android and iOS App using HTML, CSS and JS

Start developing apps for Android & iOS just by writing code using HTML, CSS and JS with the Ionic Framework.
4.1 (26 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
422 students enrolled
$19
$30
37% off
Take This Course
  • Lectures 37
  • Length 2.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2015 English

Course Description

This course is an essential for Web Developers, Professionals and Students who wish to develop Mobile Apps using the web development skills they have (HTML, CSS and JS).

At the end of this course, you will be capable enough to develop mobile apps for Android and iOS using the web development skills you already have. We will start by using basic Ionic Components. While the course, you will learn how to use Angular [dot] js to build dynamic apps that update in real time. The course will also introduce you to Parse, an amazing Platform as a Service which allows users to store their app data on the cloud and lets the developer completely focus on their app instead of worrying about the server. We will learn how to store data on Parse and then manipulate it using our Ionic Application.

Finally, we will learn to deploy Ionic applications on real Android Devices.

The aim of this course is not to cover as much Ionic components as possible but to create an Application with as minimum components as we can so that user can easily use the application. We will make a dynamic app that updates its data in real time using Parse.

We will create a Friends List Android App that contains the list of friends which can be extended by adding new friends to the list, deleting friends or updating data for existing friends. This idea can be extended to build a cloud based contacts manager app. This app will your thought process rolling and you will start thinking in terms of Ionic Framework.

And once you have started, sky is the limit.

What are the requirements?

  • Basic knowledge of HTML5, CSS and JS.
  • Very Basic knowledge of Angular.js is an additional advantage.

What am I going to get from this course?

  • Set up development environment for Ionic Framework
  • Download and Install Ionic Framework and Prerequisites
  • Understand Basic Ionic Templates
  • Connecting Ionic Apps to Parse.com
  • Interacting with Parse.com
  • Test Apps in the Browser
  • Test Apps on the Real Devices

What is the target audience?

  • Students and Professionals who have Web Development skills and want to develop mobile Apps as well.
  • Developers who wish to expand their skill set.
  • Students who want to start in Mobile App Development.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
00:49

A brief introduction of the course.

02:02

This video explains what Ionic is and how we can leverage its functionality to develop cross-platform hybrid mobile apps.

01:07

This video explains the need to use Cordova, its functions and role in the course.

00:46

In this lecture, students will learn about the coming sections in the course and what they learn in each section.

Section 2: Setting up everything
01:49

This video will help students to understand Node.js and install it on their machines.

01:07

This video will teach students how to install Ionic and cordova which the are the soul of this course.

03:15

We will create an new Ionic Project. A "Hello World!" kind of project in Ionic and will run it.

04:24

Cloud9 is an awesome cloud development IDE. This video will help students understand how they can use C9 in their projects.

Section 3: Ionic and Its Components
03:27

We will see what Ionic Templates are and how we can use them to get started with our apps.

02:58

Students will learn about the files and folder structure of a basic Ionic Project.

02:46

Student will learn about the ion-header-bar and styling it.

02:29

Student will learn about Subheaders and create a nice search bar in the subheader.

03:56

Student will learn about Sub-header and style it.

05:01

Create amazing looking lists with Ionic CSS Classes

Section 4: Angular.js and ionic
04:24

In this video, we will introduce Angular.js in our Ionic Project.

04:20

In this video, we will make our app dynamic and get data from a JSON file. And then we will display that data in our frontend.

04:38

In this video, we will see how we can use Angular.js directives to filter and sort data in an Ionic List.

07:14

We will make our lists reorderable. The users will be able to touch and drag any item in the list and change their position in the list.

04:24

We will make use of features that Ionic offers to add delete buttons to our list.

Pull Down to Refresh in Ionic
03:26
Section 5: Introducing Parse in Ionic Project
06:27

In this video, you'll be introduced to Parse, a platform as a service, and we will save and retrieve data from Parse.

03:33

In this video we will proceed further by displaying the data as received from Parse, in our list.

06:36

In this video, we will implement a ionic popup to get data from the user and then update it on Parse.

04:19

In this video we will save the data back to Parse.

02:57

We will clean up the code and move the redundant code in a method.

05:00

In this video we will learn how to delete data using our Ionic Application from the Parse classes.

06:40

In this video, we will learn to create a popup which has text fields pre-populated with some information, ready to be edited.

05:08
Updating data from Popup into the Parse Class.
03:22

We will implement Ionic JavaScript components like $ionicLoading and Spinners.

02:34

In this video, we will learn how to create Splash Screens and Icons for our application from PSD and PNG Files.

06:06

In this final video, we will deploy our application to real devices. We will also learn where to go for more information and learning about ionic.

Section 6: Using Cordova and ngCordova
00:41

This is an introduction to this module. We will see what we are going to learn in this module.

04:23

In this video, we will start by implementing buttons to make calls from within the application. We will see a new angular service $window.

02:47

In this video, we will test the calling functionality we just built in our app, on a real Android device.

03:54

We will start by creating more buttons and add the email functionality almost the same way we built the calling functionality.

14:21

We will be introduced to ngCordova and we will learn how to use ngCordova in Ionic Projects. We will then install $cordovaSms plugin.

01:19

Finally we will test the SMS functionality on the device.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Samarth Agarwal, Application/Web Developer, Instructor, Tech Enthusiast

I have been working as a freelance application and web developer for last 3 years. I am passionate about technology and learning it. I love learning new technologies and teaching them keeps me satisfied. I love to share knowledge. Let me know if you have some knowledge that you want to share. I like to create new tools and applications that ease the tasks of a common man.

Ready to start learning?
Take This Course