Requirements
Angular fundamentals are required, as well as basic HTML, JS and CSS knowledge is required
Overview
This course takes you from being a newbie(zero) to an expert (advanced level) in making Apps, taking a very practice-orientated route. This course will introduce you to Ionic step by step and gradually add more and more Ionic components. It teaches you the latest version of Ionic from scratch with no prior knowledge needed about it. You will learn about the basics of Ionic, its rich component library, how to fetch and handle user input, how to store data and access native device features, and much more!
What Will You Study
Introduction to the Ionic Framework
Understand Ionic and Apache Cordova
Angular as the backing framework for Ionic
Advantages (and Disadvantages) of Ionic
Welcome to Ionic
Software Requirements
Installing NodeJS and VS Code
Installing Android Studio for Android and XCode for iOS
Installing Ionic and Cordova CLIs
Creating first Ionic App – "Hello Ionic"
Folder structure of an Ionic App
Understanding the role of Config.xml
Templates in Ionic
Running an Ionic App in the browser with live-reload
Running an Ionic App on Android Emulator
Running an Ionic App on iOS Simulator
Ionic Components-Basic
Core App Building Blocks
Under the Hood of Ionic Components
Setting Up a Non-Angular Ionic Project
Where to Learn all about Ionic Components
Using Basic Ionic Components
More Basic Components
Component Categories
Using the Ionic Grid
Adding Icons & Using Slots
Using CSS Utility Attributes
Using Ionic Elements like "Normal" HTML Elements
Validating User Input
Creating Ionic Elements Programmatically
Finishing Up the Base JavaScript Logic
Finalizing the Layout
Use the right Ionic Import
Using Controller Components
Building and Publishing the App
Building the Application for Android and iOS
Testing the Application Using the Genymotion Android Simulator and iOS Simulator
Styling And Theming Ionic Apps
How Styling & Theming Works in Ionic Apps
Docs & Utility Attributes
Setting Global Theme Variables
Setting Global Styles
Setting All Colors at Once
Setting Platform-Specific Style
Styling Core Components with Variables
Adding Custom CSS Rules
Component-specific CSS Variables
Debugging
Error Messages & console.log()
Using the Browser DevTools & Breakpoints
Debugging the UI & Performance
Debugging Android Apps
Debugging iOS Apps