IONIC 4 | Design Hybrid Mobile Applications | IOS & Android

Zero To Hero in Designing Hybrid Mobile Applications in latest version of Ionic 4 Neutronium

Created byMaBb Khawaja

Last updated 5/2019

English

English [Auto],

What you'll learn

Ionic 4 Components and Custom components in Ionic 4
Create, Retrieve, Update, Delete Rest Api with Php
Scss
Mobile Apps Structure
Ionic Core Concepts
Mobile Apps Designing

Course content

2 sections • 12 lectures • 54m total length

Setup and Environment Installation1:48
Install the Ionic CLI on Windows, verify the version, and follow docs to set up the core tooling for Ionic 4 hybrid mobile app development on iOS and Android.
Creating First Ionic 4 Project5:53
Create your first ionic 4 project using the command line, set the project name, and build the initial project structure with pages for a hybrid iOS and Android app.
Ionic Components3:03
Explore ionic form components and how to fetch and integrate data from an API into an ionic 4 app, using UI components like input, list, menu, and buttons.

Ion Header4:38
Learn to customize the ion header in an Ionic 4 app by using a primary color, adjusting background and content colors, and adding icons with ion-icon in different slots.
Ion Slider8:26
Design a complete e-commerce home page in Ionic 4, implementing a top image slider with four slides, adjusting padding and image height for a consistent layout on iOS and Android.
Ion Grid5:05
Explore how to design a responsive ion grid with four equal columns and icons, configuring column sizes, borders, and alignment to display four categories effectively on iOS and Android.
Ion List9:30
Explore building a list in Ionic 4 for an e-commerce app, with item cards, thumbnails, badges, and a next page button while adjusting borders, padding, and colors.
Ion Card3:14
The lecture demonstrates how to create and customize an Ion card with a title, subtitle, and content, add an image, and adjust color and padding.
Add Functions to Buttons1:07
Add buttons to icons by applying a click function across the grid, copying the click function into the TypeScript file for all columns.
Alert Controller4:57
Create and configure an alert controller in Ionic Angular, including header, message, and buttons, to respond to item interactions and display product counts.
Loading Controller3:49
Learn to implement a loading controller in Ionic 4 apps, display a loading dialog, and set messages and duration. Reuse the controller across pages while fetching API data.
Toast Control3:05
Learn to implement toast notifications in ionic 4, customize duration and position, and trigger toasts alongside alerts and loading dialogs to enhance user feedback.

Requirements

Basic understanding of mobile apps
basic understanding of angular, html, css
basic understanding of javascript/typescript

Description

This course is mainly focused on the latest version of ionic 4 which has the latest update Neutronium and i have discussed all the components of ionic 4 an update this course on regular basis with live demonstration and live coding with Project based examples.

We will cover:

Ionic 4 Components
Angular
TypeScript

Why This Course:

Clean Coding Style
Practical Implementation
Project Demos

Who this course is for:

Students who want to learn mobile app development
web designers and developers

IONIC 4 | Design Hybrid Mobile Applications | IOS & Android

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 11min

Ionic 4 Components9 lectures • 44min

Requirements

Description

Who this course is for: