Create a Full Ionic App with Material Design - Full Stack
4.4 (34 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
465 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Create a Full Ionic App with Material Design - Full Stack to your Wishlist.

Add to Wishlist

Create a Full Ionic App with Material Design - Full Stack

Build a beautiful hybrid app that people will actually want to use! Go from design to card, start to finish.
4.4 (34 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
465 students enrolled
Created by Gary Simon
Last updated 6/2017
English
Current price: $12 Original price: $50 Discount: 76% off
4 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Create a relevant and effective logo
  • Building App Mockups in Adobe Experience Design (XD)
  • App Prototyping with Adobe XD
  • Connect to an API
  • Understand Ionic Templating, Storage & Material Design
  • Integrate Search in an Ionic App
  • Integrate Cordova Plugins
  • Integrate Angular Animations
  • Build an awesome Ionic 3+ App
View Curriculum
Requirements
  • Understanding of HTML
  • Understanding of CSS
  • Basic understanding of Javascript
  • Software: Adobe Illustrator or Vector Equivalent (If you're following design)
  • Software: Adobe Experience Design (If you're following design)
Description

It's time to level up and take your design and development skills to the next level: hybrid app development.

Ionic 3 allows you to build powerful hybrid apps that work on a variety of mobile platforms including Android, IOS and Windows.

This is a full stack development course, which means you're going to witness the entire process from design to code, start to finish. To begin, we will design the logo and create a series of interactive prototype mockups. 

To begin, we will design the logo and create a series of interactive prototype mockups. Then, we will spend the rest of the course developing the app using Ionic 3 and Angular 4. 

We will use the free IGDB (Internet Games Database) API to power our app, which will allow users to sort through and discover the latest upcoming games in every genre.

If you're only interested in design or coding, that's perfectly fine! This course is structured in such a way that allows you to jump in on any lesson; as each lesson contains the project files up to that point.

As you can see, this course is absolutely jam-packed with real-world information that you can apply to every project going forward.

So, if you're ready to learn by doing, let's get started!


Who is the target audience?
  • Front-end Developer
  • Web Developer
  • App Developer
Compare to Other Ionic Courses
Curriculum For This Course
25 Lectures
03:41:19
+
App Design
8 Lectures 01:13:38

In this video, we will use Adobe Illustrator to design the logo for our UpcomingGames app. You can use any other vector-based graphics application.

Preview 10:43

In this video, we will use Adobe Illustrator to design and export our app's icon launcher. This will feature the lettermark with a long-shadow.

App Icon Design
05:51

In this video, we're going to use Adobe XD (Experience Design) to design the splash screen that will first display when the app is first loaded.

Splash Screen UI
08:13

In this video, we will design our app's main UI header and navigation, consistent with Ionic 3's material design implementation. 

Main UI Header
12:17

In this video, we will use Adobe XD's repeat grid to create a series of material design cards that will feature a large thumbnail, title, and a release date of each game.

Main Game Listing UI
08:54

In this video, we will duplicate our main UI artboard and create a representation of the Favorites page for our Ionic 3 app.

Preview 03:18

In this video, we are going to tackle 2 different screens which will list out the upcoming game's genre from IGDB, and also what the search UI will look like on our Ionic 3 app.

Game Genres & Search UI
10:30

Each game has a variety of information we can add to a game details page. In this video, we are going to design the UI for this screen.

Game Details UI
13:52
+
API Setup
2 Lectures 18:17

In this video, we are going to cover installing the necessary prerequisites (Node, NPM and the Ionic CLI) and use the Ionic CLI to start our project.

Installing Prerequisites & Starting the Project
04:51

In this video, first, we're going to setup a free IGDB.com account and copy an API key. Then, we're going to create a provider with the Ionic CLI and use it to connect to the IGDB API.

Preview 13:26
+
Home Page
5 Lectures 43:45
Generating the Page & Attaching the API
06:06

We're going to use Ionic Storage to store a few properties that will allow the app to remember a user's favorites and their preferred game genre. We will also integrate an Ionic LoadingController to help display a loading message while the API is being accessed.

Integrating Storage and a LoadingController
11:40

In this video, we will hop into the HTML template file for our home page, and structure an Ionic material design header & navigation based on our Adobe XD mockup.

Defining the Navigation Template
08:55

In this video, we will continue to work within the home template HTML file and define the game listings. We will use Ionic's material design ion-card components.

Defining the Games Listing Template
09:09

In this video, we will use our home's sass (scss) file to define rulesets that will help style our game listings to match our Adobe XD mockup.

Styling the Games List
07:55
+
Secondary Pages
4 Lectures 35:26

In this video, we will create the necessary methods to make our Favorite button work. They will use Ionic Storage to remember a user's favorite games.

Favorites
09:43

In this video, we will create a Filters page and accompanying modal, which will display the game genre's from the API.

Filters Modal
06:19

In this video, we will work within the genres template and component file to structure the template and connect to the API game genre's endpoint.

Filters Template & API
08:39

In this video, we will ensure that our Search function works by defining a series of methods to show the search, and communicate with the IGDB game search API.

Search
10:45
+
Details Page
5 Lectures 42:01

In this video, we will generate a Details page with the Ionic CLI. Then, we will work within our Data provider to define methods for accessing individual games.

Details Page API
10:55

In this video, we will work within the Details HTML template to define all of the necessary templating for each game.

Details Template
11:14

In this video, we will use the Details Sass (scss) file to provide style to our details UI; all based on the Adobe XD details mockup we created earlier.

Details Styling
06:05

In this video, we will integrate 2 Cordova plugins. The first is for playing our game videos via Youtube, and the second is for launching an InAppBrowser for visiting the website link.

Making the Videos and Website Link Work
05:14

In this video, we will integrate Angular animation and apply it to various elements of our Ionic 3 UI.

Adding Animation
08:33
+
Wrapping it up
1 Lecture 08:12

In this video, we're going to first generate the necessary resources with the Ionic CLI for our app Icon and splash screen. Then, we will use the Ionic CLI to run the app on our phone.  I hope you enjoyed this course!

Launching the App on your Phone
08:12
About the Instructor
Gary Simon
4.4 Average rating
3,268 Reviews
49,699 Students
11 Courses
Professional Freelance Designer & Course Instructor

Gary Simon is a professional freelance graphics and web designer with well over a decade of experience. Having served over a thousand clients, Gary understands many facets of the design industry.

He has also been a course instructor for several of the top online education websites, teaching a wide range of topics including:

  • Web Design
  • Graphic Design
  • Mobile / GUI Design
  • 3D
  • Motion Graphics

Gary began designing websites in 2000, and just a few years later started focusing on identity design. From that point on, Gary grew a large clientele that allowed him to fully develop skills that extend beyond design alone.

The following is a list of web technologies in which Gary is proficient:

  • HTML & CSS (Responsive)
  • JavaScript & jQuery
  • XML
  • PHP
  • MySQL

He is also an expert with the following software:

  • Adobe Photoshop
  • Adobe Illustrator
  • Adobe After Effects

Gary began teaching his skills to others after releasing a single logo design tutorial, which has since garnered over a million views. In 7 years, Gary has released over 200 video tutorials and 20+ video courses. On his Youtube channel alone, his videos receive a half million views monthly. He enjoys connecting with students and helping them develop their skills on an on-going and frequent basis.