Designing the Home Page

Learn how to design the Home page of an Angular application.

Home page design

TThe design for the Home page serves as the landing page of our course management application. This is the first page that a new user who has no account will see. It is also the page where anyone who tries to access the dashboard without authorization and authentication will be redirected. We can begin the design for the Home page by following the steps below:

Step 1: Generate the home component

We can do this using the Angular CLI by running the command below:

ng generate component components/home

Our folder structure should look like this:

src > app > components > home

Inside the home folder, we have the following files generated by the Angular CLI:

  • home.component.css
  • home.component.html
  • home.component.spec.ts
  • home.component.ts

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy