Designing the Home Page
Explore how to design the home page of a course management application using Angular. This lesson guides you through generating the home component and creating a welcoming layout with Bootstrap-inspired styling, preparing you to welcome users and handle unauthorized access.
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.csshome.component.htmlhome.component.spec.tshome.component.ts
Step 2: Design the home.component.html file
Now that our home component has been generated, we can paste the code below in the home.component.html file:
<h5 class="mt-5">Welcome to Course App</h5>
<div class="bg-light p-5 rounded-lg m-3">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">Course List is a platform where you can keep a diary of all courses you have taken or intend to take
in the future..</p>
<hr class="my-4">
<h5>Login or register to get started.</h5>
<a class="btn btn-primary btn-lg">Register</a>
<a class="btn btn-primary btn-lg float-end">Login</a>
</div>The steps below summarize what we’ve done in the code above::
-
In line 1, we create an
h5tag that contains a welcome message. -
Next, we create a custom jumbotron section on the
divbelow it in line 3. Jumbotron was first introduced in Bootstrap 3 as a big padded box for calling extra attention to some unique content.Jumbotrons are no longer supported in Bootstrap 5, but with the help of some special classes, we can create this effect.
-
Within the
divin line 3, we design our register and login buttons, which do not currently navigate to any page.
Step 3: Expected output
📝 Note: The register and login buttons do not currently navigate to any page. We’ll set this up towards the end of this chapter.
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"]
}