Ionic Tutorials

Josh Morony

5 min read

Originally published October 10, 2018

The Ionic Framework, along with the ecosystem that surrounds it, allows you to build cross-platform mobile applications with web technologies (HTML/CSS/Javascript) and a single codebase. Ionic applications can be built as:

Native iOS Applications
Native Android Applications
Mobile Web Applications
Progressive Web Applications (PWA)
Desktop Applications
and more...

The write once, run everywhere approach is a lofty goal and despite promises from various tools the reality usually ends up falling some distance away from that goal.

The key advantage, at least in my opinion, that Ionic has over other options is that it runs on the web and the web runs just about everywhere. Some solutions/frameworks allow you to write your mobile applications using web code, but this is later converted into platform specific code (depending on your perspective, this may be seen as an advantage) - unlike Ionic, where the code you write is the code that runs, and it is universally supported wherever the web is.

Whether you are building an iOS application, an Android application, a desktop application, or a mobile web application - no matter where you are running your Ionic code it will be running inside of a web browser running web code. Generally speaking, that means that no matter where your code is running, no changes will be required.

Ionic does also provide the ability to integrate with Native APIs (e.g. Bluetooth, Contacts, NFC) that are not typically accessible through the web. As time goes on, more and more of these APIs are being exposed to the web, which removes the need to write any platform-specific code. However, for some native features, you will still need to have code for specific platforms (although, that code can still all be kept within a single codebase) - Ionic's Capacitor project aims to help with this.

So, even with Ionic, we perhaps still haven't unequivocally achieved that write once, run everywhere goal... but we're bloody close

Getting Started

These tutorials should get you underway, but there is plenty more to learn. You will find resources on just about any Ionic topic you can think of on this website, but if you're looking for a more structured, guided, and up-to-date experience for learning Ionic you might want to check out my beginner level book.

This book was originally released all the way back during the alpha version of Ionic, and since then it has been constantly updated for each new version that has been released (and updates are always released for free). It will teach you everything you need to know for the most up to date version of the Ionic framework, all the way through from the basics to submitting your application to the app stores.

Learn more about the book

NOTE: The free tutorials you will find below have been written over the span of several years. Whilst I do my best to keep the tutorials on my website up to date, there will be some that will not work as-is. Most of the time, only minor changes will be required to get things working.

Challenges

As you're learning Ionic, it is also important to attempt to tackle building out your own solutions without relying too much on individual tutorials to guide you through the process. This can help highlight areas that you are struggling with, and where you might need to focus your attention.

I've put together some challenges that you way wish to attempt over time. Once you have spent some time learning various concepts, you may attempt to tackle one or more of these challenges. Repeating this process is a good way to become competent with Ionic: Learn, Build, Repeat.

Latest Tutorials

To view the most recent Ionic tutorials, you can click here.

General Concepts

Fetching, Handling, and Saving Data

Basic Styling and Theming

User Interface and User Experience

Forms and Data

Custom Components

Practical Examples

Performance

Building and Submitting to App Stores

Security

Debugging

Unit and End-to-End Testing

Still looking for more?

Once you have got the basics down and you are fairly comfortable with building mobile apps with Ionic in general, you might be interested in checking out my advanced course for Ionic developers.