Sorry, your browser is not supported
To have the best experience using Skillshare, we recommend that you use one of these supported browsers.

Learn Ionic 3 From Scratch

Paul Halliday

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
110 Videos (6h 29m)
    • Introduction

      0:49
    • Prerequisites

      1:26
    • Resources

      0:37
    • Environment Setup - Windows

      1:52
    • Environment Setup - Mac

      2:14
    • Selecting an Editor

      0:40
    • Angular 4 Primer

      2:41
    • Angular CLI Introduction

      1:26
    • Create Your First Angular Application

      1:00
    • Angular Folder Structure and Testing

      5:54
    • Angular - NgModule

      2:06
    • Angular - Components

      1:20
    • Angular CLI Basics

      5:43
    • Angular - Data Binding

      3:48
    • Angular - Events

      3:04
    • Angular - ngModel

      2:22
    • Angular - *ngIf Directive

      2:06
    • Angular - *ngIf Else Directive

      2:11
    • Angular - *ngFor Directive

      4:29
    • Angular - Component Communication

      6:40
    • Angular - Pipes

      5:10
    • Angular - Recap

      0:11
    • Ionic CLI - Installing the Ionic 3 CLI

      0:42
    • Ionic CLI - Creating a New Project with the Ionic 3 CLI

      2:59
    • Ionic CLI - Listing Project Templates

      2:33
    • Ionic CLI - Running our Project in the Browser and on a Device

      1:47
    • Ionic CLI - Using Live Reload on a Device

      0:37
    • Ionic CLI - Generating Project Components

      2:14
    • Ionic CLI - Getting Environment Information

      1:43
    • Ionic CLI - Accessing the Ionic Documentation

      0:28
    • Ionic CLI - Creating an Ionic.io Account

      0:23
    • Ionic CLI - Authenticating with Ionic.io Within the CLI

      0:33
    • Ionic CLI - Creating an Application on the Ionic.io Platform

      0:52
    • Ionic CLI - Using Ionic View to Run Your Application on a Device

      1:54
    • Ionic CLI - Generating Splash Screen and Icon Resources

      2:40
    • Ionic 3 - Installing Dependencies

      2:59
    • Ionic 3 - Creating Your First Project

      2:02
    • Ionic 3 - Run Your Application in a Browser

      1:44
    • Ionic 3 - Folder Structure

      5:05
    • Ionic 3 - Config.XML and Application Name

      0:42
    • Ionic 3 - Package.json

      0:28
    • Ionic 3 - Adding Content to our Application

      0:33
    • Ionic 3 - Introduction Recap

      0:35
    • Navigation - Creating A New Page

      1:22
    • Navigation - Navigating to Another Page

      6:25
    • Navigation - Lazy Loading Pages

      1:15
    • Navigation - NavParams

      4:07
    • Navigation - Lifecycle Hooks

      6:41
    • Navigation - Back Navigation

      2:16
    • Navigation - Root Navigation and Stack Overview

      6:14
    • Theming - Colour Selection

      2:19
    • Theming - Custom Colours

      4:28
    • Theming - Text Alignment

      2:26
    • Theming - Text Transformation

      1:34
    • Theming - Padding

      2:23
    • Theming - Margin

      1:21
    • Theming - Changing Colour Contrast

      3:47
    • Project 1 - Creating the 'GitHub Profile Searcher' Project

      1:33
    • Project 1 - Creating the Profile Search Page

      3:38
    • Project 1 - Profile Search View and Model

      4:17
    • Project 1 - Navigation and Parameters

      4:52
    • Project 1 - Mocking User Data

      2:25
    • Project 1 - Search Results Implementation

      7:17
    • Project 1 - Displaying Search Results on Screen

      9:16
    • Project 1 - Mocking Repository Data

      5:20
    • Project 1 - Displaying Repositories in Search Results

      3:56
    • Project 1 - Mid Section Recap

      5:40
    • Project 1 - Retrieving User Data

      7:03
    • Project 1 - Retrieving User Repositories

      4:43
    • Project 1 - @IonicPage() and Deep Linking

      2:45
    • Project 1 - Final Thoughts

      1:09
    • Project 2 - Scaffolding our Application Design

      4:38
    • Project 2 - Splash Screen

      2:11
    • Project 2 - Login and Navigation

      3:52
    • Project 2 - Register Design

      1:42
    • Project 2 - Inbox Design

      2:21
    • Project 2 - Channel List

      1:20
    • Project 2 - Profile

      1:54
    • Project 2 - Selecting a User

      1:11
    • Project 2 - Chatroom

      4:03
    • Project 2 - One on One Chat

      0:24
    • Project 2 - Edit Profile

      0:39
    • Project 2 - Reviewing Requirements

      2:01
    • Project 2 - Searching for Users

      0:47
    • Project 2 - Design Recap

      1:45
    • Project 2 - Creating our 'Beep' Application

      1:02
    • Project 2 - Creating the 'Login' Page

      2:42
    • Project 2 - Login Form and Styling

      5:10
    • Project 2 - Register

      2:00
    • Project 2 - Theming

      3:05
    • Project 2 - Page Creation and Navigation

      3:23
    • Project 2 - Adding Tabs

      4:37
    • Project 2 - Tab Icons

      4:07
    • Project 2 - Lazy Loading

      1:15
    • Project 2 - Theming the Inbox Page

      1:49
    • Project 2 - Mocking Data

      7:42
    • Project 2 - Showing Messages on Screen

      6:31
    • Project 2 - Adding Components and Refactoring

      8:58
    • Project 2 - Creating User Accounts with Firebase and AngularFire2

      17:06
    • Project 2 - Authenticating Users with Firebase and AngularFire2

      3:17
    • Project 2 - Component Communication with EventEmitters

      10:37
    • Project 2 - Abstract Authentication to a Service

      6:36
    • Project 2 - Refactoring Component to use EventEmitters

      4:48
    • Project 2 - Creating an Edit Profile Form

      6:43
    • Project 2 - Saving Authenticated User Data to Firebase

      11:59
    • Project 2 - Login Form/Flow Improvements

      9:05
    • Project 2 - Login/Register Form Validation

      11:14
    • Project 2 - Displaying User Profile

      7:42
    • Project 2 - Searching Users and Configuring Firebase Rules

      9:24
    • Project 2 - Edit Profile as an Authenticated User

      7:28

About This Class

//TODO

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 class, 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 (as of May 2017) which includes the modularisation of AngularFire2 into different packages. 

3 of 3 students recommendSee All

Such a great tutorial

45

Students

--

Projects

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 and has received numerous awards including Best Student, SIEM Prize, Best Business Idea, the Sunderland University Professional Award, and more.

His experience is primarily in web related technologies such as Angular, Node, React, NativeScript, Ionic, and more. He also has a great...

See full profile

Technology Mobile Development