Learn Ionic 3 From Scratch

Create Cross Platform Mobile Applications with Ionic 3, Angular 4, TypeScript and Firebase.
Learn Ionic 3 From Scratch
File Size :
4.01 GB
Total length :
12h 35m



Paul Halliday (BSc Hons)


Last update




Learn Ionic 3 From Scratch

What you’ll learn

Create a mobile application that interfaces with the GitHub API.
Create a real time chat application with Ionic 3 and Firebase
Create an application prototype with Adobe Experience Design
Have a UX driven approach to application development.
Understand the intricacies of Ionic 3 and Angular 4, and use them to make powerful cross platform mobile applications.
Integrate a variety of Ionic Native plugins with your mobile applications.

Learn Ionic 3 From Scratch


An understanding of JavaScript
A brief understanding of Angular and TypeScript would be beneficial, but not ultimately required.


With over 10 hours of content and more to come, this course is the ultimate learning resource for Ionic 3.
“Learn Ionic 3 From Scratch by Paul Halliday is a course that guides you from a beginner to expert in Ionic 3. If you have seen any of Paul Halliday’s work before, you know that he is committed to providing up-to-date, thorough video content with a clear cut approach.”
You may have seen other courses on the market that are available to purchase already, yet haven’t been updated to Ionic 3 or taking advantage of the latest Angular concepts or features. Paul releases daily videos on his YouTube channel and his commitment to the course content is the same. By purchasing this course, you’re investing in your mobile development future as you can be confident that it will be updated as time goes on.
This course is community oriented and the discussion tab can be used to showcase your progress, suggest content ideas, ask for help, and much more.
Applications Built
Within the “Learn Ionic 3 From Scratch” course, you will be making the Github Profile Searcher from scratch. Prior to interacting with any API, we create our mock data and TypeScript interfaces for a strongly typed approach to development.
We then look at making ‘Beep’, the social chat application from UX design all the way to full implementation*. As you follow the course, we design the application in Adobe Experience Design and then look at implementing the various features to a production standard within our project.
We use Firebase for our real-time database and authentication, as well as the latest release candidate which includes the modularisation of AngularFire2 into different packages.
By the end of this course, you’ll be able to make cross platform mobile applications using Angular 4, TypeScript and Ionic 3. This means that you’ll be able to:
Create high performance mobile applications using web technologies (HTML5 and JavaScript).Have a strong portfolio of applications* and understanding of Ionic 3, TypeScript and  Angular 4.Master the Ionic 3 CLI with a section dedicated to it’s usage.Use Ionic Native and Cordova to hook into native device features*.Theme your Ionic applications with bespoke styles, and understand common accessibility patterns.Master Ionic 3 navigation patterns with lifecycle hooks.Increase performance of your Ionic 3 applications with lazy loading.
And much more.
* Feature is under development as the course continues to grow.
About Paul
Paul Halliday is a Durham based tech entrepreneur that specialises in cross platform HTML5 mobile development. He graduated with a first class honours in BSc Computer Science from the University of Sunderland. He’s also a Progress Telerik Developer Expert and a Google Accredited Mobile Site Professional.


Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Course Overview

Lecture 3 Prerequisites

Lecture 4 Q&A

Lecture 5 Environment Setup – Windows

Lecture 6 Environment Setup – Mac

Lecture 7 Ionic and Cordova Setup

Lecture 8 Editors

Lecture 9 VSCode Plugins

Lecture 10 Recap

Section 2: Angular 4 Primer

Lecture 11 Angular Anatomy

Lecture 12 Introduction to the Angular CLI

Lecture 13 Creating our First Angular Application

Lecture 14 Angular Folder Structure and Testing

Lecture 15 NgModule

Lecture 16 Components

Lecture 17 CLI Basics

Lecture 18 Data Binding

Lecture 19 Events

Lecture 20 A note about FormsModule

Lecture 21 NgModel

Lecture 22 *ngIf Directive

Lecture 23 *ngIf Else

Lecture 24 *ngFor Directive

Lecture 25 Component Communication

Lecture 26 Pipes

Lecture 27 Recap

Section 3: Ionic 3 CLI

Lecture 28 Installing the Ionic 3 CLI

Lecture 29 Creating a New Project with the Ionic 3 CLI

Lecture 30 Listing Project Templates

Lecture 31 Running our Project in the Browser and on a Device

Lecture 32 Using Live Reload on a Device

Lecture 33 Generating Project Components with the Ionic CLI

Lecture 34 Getting Environment Information with Ionic Info

Lecture 35 Accessing the Ionic Documentation

Lecture 36 Creating an Ionic.io Account

Lecture 37 Authenticating to Ionic.io Within the CLI

Lecture 38 Creating an Application on the Ionic.io Platform

Lecture 39 Using Ionic View to Run Your Application on a Device

Lecture 40 Generating Splash Screen and Icon With the CLI

Section 4: Getting Started with Ionic 3

Lecture 41 Creating an Ionic Application

Lecture 42 Serving the Application

Lecture 43 Folder Structure

Lecture 44 Your First Application

Lecture 45 Ionic Document Flow

Lecture 46 Challenge – Create an Ionic Application

Lecture 47 Run Your Application in a Browser

Section 5: Project: Greeting Application

Lecture 48 Introduction

Lecture 49 Project Initiation

Lecture 50 Run the Project in the Browser

Lecture 51 Creating the HomePage Template

Lecture 52 Capturing the Greeting Name

Lecture 53 Displaying a Greeting Toast

Lecture 54 Recap

Lecture 55 Source Code

Section 6: NEW: BMI Calculator

Lecture 56 Introduction

Lecture 57 Creating a new project

Lecture 58 Creating the HomePage

Lecture 59 Customising the UI

Lecture 60 Calculating BMI

Lecture 61 Classifying BMI

Lecture 62 Overview

Section 7: Navigation

Lecture 63 Creating a New Page

Lecture 64 Navigating to Another Page

Lecture 65 Lazy Loading Navigation

Lecture 66 Lazy Loading Components – Feature/Shared Modules

Lecture 67 Navigation Parameters

Lecture 68 Lifecycle Hooks

Lecture 69 Back Navigation

Lecture 70 Root Navigation and Stack Overview

Section 8: Theming

Lecture 71 Introduction – Colour Selection

Lecture 72 Custom Colours

Lecture 73 Text Alignment

Lecture 74 Text Transformation

Lecture 75 Padding

Lecture 76 Margin

Lecture 77 Changing Colour Contrast

Section 9: NEW: Bitcoin Price Tracker

Lecture 78 What we will be Building

Lecture 79 Create a New Project

Lecture 80 Creating the Bitcoin Page

Lecture 81 Ionic Style Variables

Lecture 82 Building the UI

Lecture 83 Getting Bitcoin Prices

Lecture 84 Binding to Observables

Lecture 85 Changing Selected Currency

Lecture 86 Refreshing Selected Currency

Lecture 87 Learning Outcomes

Section 10: Project: Flashlight Application

Lecture 88 Creating a New Application

Lecture 89 Adding the Flashlight Provider

Lecture 90 Controlling Flashlight Functionality

Lecture 91 Adding Buttons and Status

Lecture 92 UI and Ionic Platform

Lecture 93 Running on a Device

Lecture 94 Summary and Further Work

Section 11: Project: GitHub Profile Searcher

Lecture 95 Creating the ‘GitHub Profile Searcher’ Project

Lecture 96 Creating the Profile Search Page

Lecture 97 Profile Search View and Model

Lecture 98 Navigation and Parameters

Lecture 99 Mocking User Data

Lecture 100 Search Results Implementation

Lecture 101 Displaying Search Results on Screen

Lecture 102 Mocking Repository Data

Lecture 103 Displaying Repositories in Search Results

Lecture 104 Mid Section Recap

Lecture 105 Retrieving User Data

Lecture 106 Retrieving User Repositories

Lecture 107 @IonicPage() Decorator and Deep Linking

Lecture 108 Final Thoughts

Lecture 109 Source Code

Section 12: Project 2: Shopping List – Ionic & Firebase CRUD

Lecture 110 Create the Project and Install Dependencies

Lecture 111 Lazy Loading Pages

Lecture 112 Adding AngularFire2

Lecture 113 Firebase Rules

Lecture 114 Add the AddShoppingItemPage

Lecture 115 AddItemPage View

Lecture 116 ShoppingItem Model

Lecture 117 Adding Shopping Items

Lecture 118 Displaying Shopping Items

Lecture 119 Editing Shopping Items

Lecture 120 Adding a ToastService

Lecture 121 Removing Items from the List

Lecture 122 Recap

Lecture 123 Source Code

Section 13: UX Driven Design: Designing the ‘Beep’ Application

Lecture 124 Preface

Lecture 125 Scaffolding our Application Design

Lecture 126 Splash Screen

Lecture 127 Login and Navigation

Lecture 128 Register

Lecture 129 Inbox

Lecture 130 Channel List

Lecture 131 Profile

Lecture 132 Selecting a User

Lecture 133 Chatroom

Lecture 134 One on One Chat

Lecture 135 Edit Profile

Lecture 136 Reviewing Requirements

Lecture 137 Searching for Users

Lecture 138 Recap

Lecture 139 ‘Beep’ Design Prototype

Section 14: Work in Progress: Beep: Create a Chat Application with Ionic 3 and Firebase

Lecture 140 Preface

Lecture 141 Creating our ‘Beep’ Application

Lecture 142 Creating the ‘Login’ Page

Lecture 143 Login Form and Styling

Lecture 144 Register

Lecture 145 Theming

Lecture 146 Page Creation and Navigation

Lecture 147 Tabs

Lecture 148 Tab Icons

Lecture 149 Lazy Loading

Lecture 150 Theming the Inbox Page

Lecture 151 Mocking Data

Lecture 152 Showing Messages On Screen

Lecture 153 Adding Components and Refactoring

Lecture 154 Creating User Accounts with Firebase and AngularFire2

Lecture 155 Authenticating Users with Firebase and AngularFire2

Lecture 156 Component Communication with EventEmitters

Lecture 157 Abstract Authentication to a Service

Lecture 158 Refactoring Register Form Component to use EventEmitters

Lecture 159 Creating an Edit Profile Form

Lecture 160 Saving Authenticated User Profile Data to Firebase

Lecture 161 Login Form/Flow Improvements

Lecture 162 Login/Register Form Validation

Lecture 163 Displaying User Profile

Lecture 164 Searching Users and Configuring Firebase Rules

Lecture 165 Edit Profile as an Authenticated User

Lecture 166 Temporary Automatic User Authentication

Lecture 167 Trimming Search Queries

Lecture 168 Creating the Message Page

Lecture 169 Removing Tabs from Sub Pages

Lecture 170 Adding a Send Message Box

Lecture 171 Displaying Chat Messages

Lecture 172 Adding a Signout Button

Lecture 173 Combining Observables with mergeMap

Lecture 174 Adding Chat Channels

Lecture 175 Displaying Channel List

Lecture 176 Sending Messages to Channels

Lecture 177 Showing Online Users

Lecture 178 Firebase Hosting Deployment

Lecture 179 Chat Message Structure

Lecture 180 User Messages with Firebase Cloud Functions

Lecture 181 Preparing Chat Messages Component

Lecture 182 Sending One on One Chat Messages

Lecture 183 Displaying One on One Messages

Lecture 184 Generate Last Messages with Cloud Functions

Lecture 185 Displaying Last Message List and Starting Conversations

Section 15: Ionic 3 Components

Lecture 186 Preface

Lecture 187 Buttons

Lecture 188 Badges

Lecture 189 Chips

Lecture 190 FAB List

Lecture 191 Modal

Lecture 192 Toast

Lecture 193 Toggle

Lecture 194 Tooltips

Lecture 195 Popover and onDismiss()

Lecture 196 Events

Lecture 197 Using @IonicPage() for Deep Linking

Lecture 198 Split Pane

Lecture 199 Slider

Section 16: Ionic Native Plugins

Lecture 200 Introduction

Lecture 201 Call Number

Lecture 202 Cordova

Lecture 203 Application Version

Lecture 204 AdMobPro

Lecture 205 Brightness

Lecture 206 Fingerprint AIO

Lecture 207 Flashlight

Lecture 208 SQLite

Lecture 209 Speech to Text

Lecture 210 Network Detection

Lecture 211 Notification Badges

Lecture 212 Vibration

Lecture 213 Video Player

Section 17: Misc

Lecture 214 Performance Improvements with WebViews (Crosswalk, UIWebView, WKWebView)

Lecture 215 Platform Aware UI

Lecture 216 Using ‘Async’ and ‘Await’

Lecture 217 Using Ionic View to Test Our Application

Anyone who wants to make cross platform mobile applications using the latest web technologies.

Course Information:

Udemy | English | 12h 35m | 4.01 GB
Created by: Paul Halliday (BSc Hons)

You Can See More Courses in the Developer >> Greetings from CourseDown.com

New Courses

Scroll to Top