#### Welcome to the first Video Tutorial of Mobile Apps Development using Ionic Framework
<center> <img src= https://imgur.com/Tknygul.jpg/> </center>

#### What Will I Learn?

- You will learn how to develop amazing mobile apps using **Ionic Framework** and **Cordova**
- You will learn how to inject Ionic and Cordova modules into node.js
- You will learn about different templates of Ionic Framework for mobile apps
- Your will learn how to deploy mobile apps into mobile 	 device or **Android** or **IOS emulator**

#### Requirements
##### System Requirements:

- [Node.js](https://nodejs.org/en/) for building apps
- [Visual Studio Code](https://code.visualstudio.com/) for code editing 
- [Git](https://git-scm.com/downloads) **(Optional)** or Command Prompt or Terminal
- An Android or iOS Emulator or mobile device for testing
##### OS Support:

- Windows 7/8/10
- macOS 
- Linux 
#### Difficulty



- Intermediate

#### Required Understanding
- You just need a little bit of knowledge of HTML,CSS and JS
- A fair understanding of Programming 
- A thirst for learning and developing something new


#### Description
-	This particular video tutorial Series is for everyone who would like to build amazing Android and iOS apps. In this tutorial, you will learn about Ionic Framework with AngularJS from the beginning, that allows you to develop amazing mobile apps with just **HTML, CSS** and **JS**.
-	All you need is a little bit of understanding of web design	 . If you are a web developer and want to build mobile apps, Ionic will probably be your piece of cake. You will be able to create amazing apps that will work on both Android and iOS.
#### What is Ionic Framework ?
Ionic is an HTML5 mobile app development framework targeted at building hybrid mobile apps. Hybrid apps are essentially small websites running in a browser shell in an app that have access to the native platform layer. Hybrid apps have many benefits over pure native apps, specifically in terms of platform support, speed of development, and access to 3rd party code.
Think of Ionic as the front-end UI framework that handles all of the look and feel and UI interactions your app needs in order to be compelling. Kind of like **“Bootstrap for Native”** but with support for a broad range of common native mobile components, slick animations, and beautiful design. [Source](https://ionicframework.com/docs/v1/guide/preface.html)
#### Some of the key steps that are used in this tutorial
*_Below I discuss important coding steps that are must required in this video tutorial_*
##### STEP 1:
After installing`Node.js,Visual Studio Code` and `GIt` we have to check the versions of our Node.js and Node Package Manager Using Git commands

<center> <img src= https://imgur.com/WwbZMhX.jpg/> </center>

<center> <img src= https://imgur.com/w6e72rm.jpg/> </center>
##### STEP 2:
Now we install Ionic and Cordova module globally using the same command line 
`npm install ionic cordova -g`

<center> <img src= https://imgur.com/AkqcMy5.jpg/> </center>
##### STEP 3:
Now we have our modules installed using the npm,we are going to type Ionic commands to build our first app
`Ionic start FirstApp blank`
We name our first app as FirstApp.

<center> <img src= https://imgur.com/qGzqbX7.jpg/> </center>
##### STEP 4:
As we have build our first app we used `ionic serve`command to open this app on the web browser

<center> <img src= https://imgur.com/iharELz.jpg/> </center>
As you see the app is just holding a header as **Ionic Blank Starter**. To improve its readability and functionality we use `ionic serve --l` command which opens the app in the lab mode

<center> <img src= https://imgur.com/VFlMArL.jpg/> </center>
##### STEP 5:
At the end we have our first app deployed to android emulator

<center> <img src= https://imgur.com/ZFDk5w2.jpg/> </center>


#### Video Tutorial
https://youtu.be/AAOdohe_r50

#### Curriculum
This video is first video of the Develop Mobile Apps Using Ionic Framework Series. When next parts are uploaded, links to previous parts will be place here.



<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@exploringworld/develop-mobile-apps-using-ionic-framework-part-1">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>