Learn to build amazing Ionic UI experiences through real world examples.
"All Ionic apps look the same" - a popular complaint, and you’ve probably had your own share of struggles with Ionic components and how to customize them for your own needs in the past.
But just because Ionic components come with a certain styling out of the box, it doesn’t mean it’s the only way to use them!
In Built with Ionic I’ll show you what’s possible with Ionic by replicating some of the worlds best app interfaces:
We will not only focus on the page architecture and overall app composition, but really dive into the details about small micro animations and gestures we all take for granted in these native apps.
To build a unique interface we’ll have to write quite a bit of CSS, learn to use flex box and customize Ionic components with CSS variables and shadow parts.
Why do you sometimes have to use CSS to style content as opposed to just the --color variable?
To achieve all of this we start with a refresher on CSS basics and a detailed description of how to style every piece of Ionic components.
Through our app examples you’ll learn how to apply gestures and Ionic animations, or combine them to build powerful features.
Besides our real world examples you will also learn to build a responsive shop with Ionic that looks great on mobile devices and as a traditional website.
Having problems with dark mode?
You'll learn to create a dark mode switch, create your own dark theme and even completely re-brand a white label app with Ionic.
You can follow Built with Ionic from start to end or just pick the app chapters you are most interested in - all four apps are unique and start, as always in my tutorials, with a blank Ionic application.
After going through the examples you will be able to build your own unique app interfaces and spice them up with advanced animations and gestures - you’ll become a master of the Ionic UI.
You’ll be surprised what’s possible in apps Built with Ionic 🔥
Note: This eBook is using Angular - React and Vue might follow in the future. All projects come with dummy JSON data and no real backend, which would be nearly impossible to recreate for these apps!
Take a look at the different apps & real world examples that you will build along the book.
Build a fully responsive UI within this dummy pizza shop app. Understand how to theme your Ionic application for light and dark or completely re-theme a white label application. Use accordions & dropdowns to embrace the underlying platform patterns.
Responsive
Theming
Replicate one of the most popular entertainment apps including introduction with beautiful swipe transitions, login and inside pages. We'll make sure our app looks and feels like the real app, and put a lot of love into styling the various internal pages.
Swiper
Modal
Styling
Rebuild one of the most used apps of all time with Ionic and create stunning gestures and animations to flash your users.
Camera Preview
Gestures & Animations
Custom Component
Food ordering apps are all across the app store and differ from country to country, but the universal principle stays the same: Get a beautiful representation of restaurants, their food and a checkout process!
Directives
Filtering
Modals & Popover
The basic package of Built with Ionic contains the eBook and source code of all 4 apps, but you can get even more value with the premium package:
You will receive all assets after your purchase including all future updates for free.
The package for those who want to build outstanding apps and learn from the best.
Of course you get all goodies from the Basic and Premium package as well, including future updates for free.
Built with Ionic in action
Make fields more engaging by using Ionic animations.
Make screens more exciting with small transitions.
Build powerful gestures for a real native like UI.
Feel more confident about every future Ionic app you want to build
Latest versions
Animations
Gestures
Styling
Directives
Custom Components
Custom Overlays
App Templates
Pick your book package
Get only the book or additional guides, courses and app templates with the Premium and Ultimate package.
eBook in 3 formats (PDF ~400 pages, epub, mobi)
Source code (Ionic Angular) from all 4 app examples of the book
All future updates for free
Everything from Premium
Video Course AirBnB Design (2 hours of video + code, $50 value)
Video Guide Gmail Swipe Gesture (26 min video + code)
App Template Spotify UI
App Template Gmail UI
$30 Kickoff Ionic discount
Everything from Basic
Video Guide Tinder Swipe Gesture (14 min video + code)
App Template Twitter UI
$10 Ionic Academy discount
Worked with Ionic since v1 through all the ups and downs. Created books, video courses and a dedicated online school for Ionic developer.
Ionic Insider & Course instructor
Hey I'm Simon, perhaps you've seen me on YouTube, my main blog Devdactic or inside my Ionic Academy before.
After years of creating tutorials around every possible Ionic feature, one of the main problems I see remains:
Building epic interfaces.
To show that only the sky is the limit with Ionic, I'm covering the best interfaces from apps you already know in one book, all #builtwithionic 🎉
Enter your best email and get a free preview!
Learn through step by step examples of the worlds most popular apps how to built truly awesome Ionic interfaces.
Get the book