Modifying the Home Page

The first thing you should do is create the home page, as it is the app’s landing page. There will not be much content – just some text inside an IonCard.

The IonCard component

An IonCard 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 envisioned for the home page will consist of an image of a classroom, followed by a card header having both a subtitle and title, and a brief intro paragraph inside of an IonContent tag.

Let’s get that page built right now. If you wish to follow along, try these steps in the code widget from the previous lesson.

Here is an image to be used on the home page. It is available from the GitHub repo here here.