Learn Ionic, Nuxt and Sequelize

Theming Ionic applications is a topic that is often left undiscussed. Ionic has a robust API to theme your application so you don't have to settle with the default styles.

This course will show you how Ionic’s theming system works so that your application can have its unique look. It will explore the built-in utilities, which you can leverage directly.

You'll be introduced to the built-in CSS utilities that Ionic provides, Ionics grid system, and Ionic configuration settings to create a custom look and feel to your App.

Ionic is the beautiful, free and open source mobile SDK for developing native and progressive web apps with ease.

ionic

Style and Theme Ionic v3 Applications

This course walks you through the steps of creating a News web app using Vue.js and the Nuxt framework. You will learn how to create dynamic pages for each section of your application and load, store, display, filter, and style the data. Then end result will be a News app with multiple category pages, comments for each section, and user pages.

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Create a News App with Vue.js and Nuxt

Building native mobile applications has traditionally been a completely foreign work flow than web development. Recently frameworks, such as Ionic and React Native, have been come out to create a similar web development workflow in a native environment. 

Ionic 2 builds on top of Angular to offer a complete framework for building mobile apps using HTML, CSS, and Javascript that target native mobile and the browser. We’ll work with the RandomUser API to create an employee directory that will let us view user details, update that information, and pass the data back and forth with Ionic 2 routing.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Building apps with Ionic 2

Ionic allows you to build cross platform native applications using Angular. In this course we will convert the Eggly AngularJS application into an Ionic mobile application.

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Building an Angular 1.x Ionic Application

Welcome to the *Ionic Quickstart* series where you will learn how to get started with Ionic from the ground up. We will begin with how to install the required dependencies such as Node.js, Android SDKs and even GenyMotion to installing and running Ionic. By the time you finish, you will know how to create, edit and run an Ionic application. If you are on Windows or Mac and not sure where to start with hybrid mobile development, this is a great place to start!

Ionic Quickstart for Windows and Mac

Learn how to install the Ionic 4 CLI and validate its installation.

Install the Ionic 4 CLI

Learn how to create and use the Ionic Floating Action Button (FAB) in your Ionic 4 application.

Position an Ionic 4 Floating Action Button (FAB) Component in an App

Learn how to create and use the Ionic List component in your Ionic 4 application.

Display Data with Ionic 4 List Component

Learn how to create and use the Ionic Badge component in your Ionic 4 application.

Compose Inline Elements with Ionic 4 Badge Component

Learn how to use the Ionic 4 Actionsheet component to allow for more options than the standard Alert component.

Using the Ionic 4 Actionsheet Component

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Creating cross-platform web-based applications with Ionic 4 and React is easy thanks to the Stencil compiler and `create-react-app`.

In this video, we look at how to use create-react-app and @ionic/react to make an Ionic 4 + React application

Create an Ionic 4 application with React

Creating cross-platform web-based applications with Ionic 4 and Vue is easy thanks to the Stencil compiler and the Vue.js CLI.

We look at how to combine these together to use Ionic 4 components within our Vue.js applications.

Create an Ionic 4 application with Vue.js

Learn the changes to the Ionic button component that were introduced in version 4. Understand how to change the style and size of the button and how to quickly include an icon.

Using the Ionic Button Component

Understand the basics of the Ionic Card component. See how images are handled within the card, and how to use its sub-components like title, subtitle, and content.

Using the Ionic Card component

In this video you'll learn how to deploy a static Nuxt site to AWS's global edge CDN in less than two minutes. We'll start from scratch, creating a new Nuxt site using npx and walk through the build configuration to set up the deployment target for Jamstack / static site hosting. From there, we'll initialize a new Amplify project using the Amplify CLI and walk through the settings to configure the proper build command for Amplify hosting. Finally, we'll deploy and view the live site. Once we're finished, we'll delete the project and the hosting service.

Deploying a Nuxt Site to AWS with the Amplify CLI

In this video you'll learn how to use Amplify hosting to deploy a Nuxt site from a Git repository. We'll begin by walking through the steps of creating the deployment and configuring the correct build settings to enable a static build. Once the site is deployed, we'll view the live site hosted on AWS.

Deploying a Nuxt Site to AWS from a Git repository with Amplify hosting

In this lesson, we install the Android Software Development Kit (SDK) and the necessary Android API (Application Interface). This is the code base that allows us to run the Android platform on our PC. We also add a couple environment variables and update our PATH environment variable.

Install Android SDK for Ionic

In this lesson, we learn how to install Ionic and Cordova. We then build an app from scratch using the Ionic CLI and a blank starter template.

Build and Run an Ionic App from Scratch

In this lesson, we learn how to build a sidebar layout using only Ionic directives. Ionic provides some powerful functionality with very few semantics. Here are all the directives we will learn about:
- **ion-side-menus** - A container element for side menu(s) and the main visible content.
- **ion-side-menu-content** - A container for the main visible content, sibling to one or more `ionSideMenu` directives.
- **ion-side-menu** - A container for a side menu, sibling to an `ionSideMenuContent` directive.
- **ion-nav-view** - Used to render templates in your application. Each template 
is part of a state. States are usually mapped to a url, and are defined programatically 
using angular-ui-router (see their docs for reference).
- **ion-view** - A container for view content and any navigational and header bar information. Used as a child of `ionNavView`.
- **ion-nav-bar** - If we have an `ionNavView` directive, we can also create an 
`ionNavBar`, which will create a topbar that updates as the application state changes.
- **ion-nav-buttons** - Use nav buttons to set the buttons on your `ionNavBar` 
from within an `ionView`.
- **ion-content**- Provides an easy to use content area that can be configured 
to use Ionic’s custom Scroll View, or the built in overflow scrolling of the browser.
- **ion-list** - The List is a widely used interface element in almost any mobile app, and can include 
content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
- **ion-item** - Used to create items inside of an `ionList`.

Build a Sidebar Layout with Ionic

In this lesson, we are going to dig into Ionic lists and make use of some awesome list features that Ionic gives us for free. We are going to learn how to use the following Ionic directives:

- **ion-nav-buttons** - Use nav buttons to set the buttons on your `ionNavBar`.
- **ion-list** - The List is a widely used interface element in almost any mobile app, and can include 
content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.
- **ion-item**- Used to create items inside of an `ionList`.
- **ion-delete-button** - A child of `ionItem`, this element allows a developer to show/hide a delete button within an `ionItem` with ease.
- **ion-reorder-button** - A child of `ionItem`, this element allows a developer to reorder an `ionItem` within a list easily.

Build a Powerful List with Ionic

In this lesson, we are going to turn two forms into Angular directives in preparation for turning them into Ionic modals. This isn’t a complicated step, but it puts us in a better place for creating the modals.

Topics

Instructors

Content Type