CF

Create a full Ionic app with material design - full stack

3h 41m 22s
English
Paid

Elevate your design and development skills by diving into the exciting world of hybrid app development. With Ionic 3, you can create robust hybrid apps that function seamlessly across multiple platforms, including Android, iOS, and Windows. This full stack development course will guide you through the entire journey, from initial design to final code, providing a comprehensive learning experience. We will kick off by designing the logo and crafting a series of interactive prototype mockups.

Course Overview

The course begins with the essential task of logo design and the creation of interactive prototype mockups. Following these foundational steps, you will delve into app development using Ionic 3 and Angular 4. Our app will be powered by the free IGDB (Internet Games Database) API, enabling users to explore and discover the latest upcoming games across various genres.

Course Structure

Whether your interest lies in design or coding, this course caters to your needs by allowing you to join any lesson at any point. Each lesson is equipped with the project files needed, ensuring you can follow along seamlessly. This course is loaded with practical, real-world information applicable to all your future projects.

Are You Ready?

If you're prepared to learn by doing, this course is perfect for you. Let's embark on this journey together!

Course Requirements

  • Basic understanding of HTML
  • Basic understanding of CSS
  • Basic understanding of JavaScript
  • Software: Adobe Illustrator or a vector equivalent (for design-related modules)
  • Software: Adobe Experience Design (for design-related modules)

Target Audience

  • Front-end Developers
  • Web Developers
  • App Developers

Learning Objectives

What you'll learn:

  • Create a relevant and effective logo
  • Build app mockups with Adobe Experience Design (XD)
  • App prototyping using Adobe XD
  • Connect and interact with an API
  • Understand Ionic templating, storage, and Material Design principles
  • Integrate a search feature within an Ionic app
  • Incorporate Cordova plugins
  • Implement Angular animations
  • Build an impressive Ionic 3+ app

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 25 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 25 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Designing the Logo Project Resources
All Course Lessons (25)
#Lesson TitleDurationAccess
1
Designing the Logo Project Resources Demo
10:43
2
App Icon Design
05:51
3
Splash Screen UI
08:13
4
Main UI Header
12:17
5
Main Game Listing UI
08:54
6
Favorites UI
03:18
7
Game Genres Search UI
10:30
8
Game Details UI
13:53
9
Installing Prerequisites Starting the Project
04:51
10
Connecting to the API
13:26
11
Generating the Page Attaching the API
06:06
12
Integrating Storage and a LoadingController
11:40
13
Defining the Navigation Template
08:55
14
Defining the Games Listing Template
09:09
15
Styling the Games List
07:56
16
Favorites
09:43
17
Filters Modal
06:20
18
Filters Template API
08:39
19
Search
10:45
20
Details Page API
10:55
21
Details Template
11:14
22
Details Styling
06:05
23
Making the Videos and Website Link Work
05:14
24
Adding Animation
08:33
25
Launching the App on your Phone
08:12
Unlock unlimited learning

Get instant access to all 24 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
To enroll in this course, you should have a basic understanding of HTML, CSS, and JavaScript. Familiarity with these foundational web technologies will help you follow along with the development of the Ionic app. Additionally, having access to software such as Adobe Illustrator will be beneficial for the logo and app icon design sections.
What type of project will I build during this course?
Throughout this course, you will build a hybrid app using Ionic 3 and Angular 4. The app will leverage the IGDB (Internet Games Database) API to allow users to explore and discover upcoming games across various genres. The course covers the entire process from designing the logo and interactive mockups to developing features like a game listing UI, favorites, search functionality, and more.
Who is the target audience for this course?
This course is designed for individuals interested in both design and coding, particularly those who want to explore hybrid app development. Whether you are a designer looking to transition into app development or a developer interested in incorporating design elements into your projects, this course provides valuable insights and practical skills.
How does the depth of this course compare to other similar courses?
This course provides a comprehensive approach by covering both design and development aspects of hybrid app creation. Unlike courses that focus solely on coding or design, this course includes logo and prototype design, app development using Ionic 3, and integration with external APIs, providing a well-rounded skill set for creating full-fledged apps.
What specific technologies and tools does this course focus on?
The course focuses on using Ionic 3 and Angular 4 for app development. It also involves working with the IGDB API for dynamic content. Design tools like Adobe Illustrator are used for creating the app's logo and icons. The course provides practical experience with these technologies, offering project files to ensure you can follow along with each lesson.
What topics are not covered in this course?
The course does not cover advanced topics in backend development, such as server-side programming or database management beyond the integration of the IGDB API. It also does not delve into other app frameworks outside of Ionic 3 or advanced design software capabilities beyond what is necessary for the app's visual elements.
How much time should I expect to commit to this course?
While the course consists of 25 lessons, the total runtime is unspecified. You should plan to allocate sufficient time to work through both the design and development phases, including practical exercises like app deployment and testing. The lessons are structured to allow you to join at any point, offering flexibility in managing your time commitment.