Modifying the Home Page

Learn how to add content to an application's home page using Ionic and Angular.

We'll cover the following

The first thing I want to do is flesh out the home page, as it is the app’s landing page. There will not be much content, just some text inside an ion-card.

The ion-card component

An ion-card is a component designed to wrap basic pieces of information. By default, a card has a gray border, rounded edges, and a subtle drop shadow. As with all Ionic components, its visual style will change slightly when rendered on an Android versus an iPhone.

Cards can be as simple or as complex as you want. The card I envision for the home page will consist of an image of a classroom, followed by a card header having both a subtitle and title, and finally a brief intro paragraph inside of an ion-content tag.

You can get that page built right now.

Here is an image I will be using on the home page.

Get hands-on with 1000+ tech skills courses.