Build Your First Angular Website: Lesson 8 of 18

Creating the Home Page

Up Next

Create a Contact Page and Contact Form

Autoplaying in 7 seconds!

Cancel

Let's start building out the pages for our application. Since this course is more about Angular techniques than about styling and designing a website, we'll keep our pages fairly simple.

The main parts to focus on in this lesson is that we'll add a giant hero section and also add an image as the background image. This will let us see how to use Angular CLI's assets folder to use images.

Creating the Home Page Component

We'll keep on leveraging the Angular CLI to help build our application. This lets us avoid writing the repetitve code of creating new @Component()s. I do recommend writing a few of these by hand just so you can get the practice.

Table of Contents

    We'll use the CLI to create the home page now. We'll add it to our components folder for now. In a future lesson, we'll talk about organizing our application into separate folders and modules.

    ng g component components/home

    We'll see a new components/home/home.component.ts file.

    Creating a Hero Section

    We'll create our hero section using Bulma hero classes. We'll build this right into our home.component.ts template.

    @Component({
      selector: 'app-home',
      template: `
        <section class="hero is-info is-fullheight is-bold">
        <div class="hero-body">
        <div class="container">
    
          <h1 class="title">Home Page!</h1>
    
        </div>
        </div>
        </section>
      `,
      styles: []
    })

    Let's run through a few of the classes. I know this can feel like divitis but it's good since we don't have to write any CSS for these demos. It would be very similar if we went with other CSS frameworks like Bootstrap.

    • hero and hero-body and container: structure our overall sizing for the hero
    • is-info: make it blue
    • is-fullheight: make the hero the full height (100vh) of the browser
    • is-bold: give it a gradient

    Feel free to browse the docs and use your own classes to change the colors.

    Adding the Home Page to Our App

    We've created this new home page but haven't used it in our template yet. We'll just drop it into the AppComponent template and in a future lesson we'll see how we can add this to our routing file instead. This is a simple way to just display the page and see if it's working for us.

    // app.component.ts
    ...
    template: `
      <!-- header -->
      <app-header></app-header>
    
      <!-- testing the home page -->
      <app-home></app-home>
    
      <!-- routes will be rendered here -->
      <router-outlet></router-outlet>
    
      <!-- footer -->
      <app-footer></app-footer>
    `,
    ...

    Adding a Background Image

    While this is great, we can make it a bit better. Let's add a background image!

    We'll go grab an image from http://pexels.com or http://unsplash.com and save it to your assets/img folder. Choose something that will look good with text overlaid on it.

    I've chosen this one: https://unsplash.com/photos/3N5ccOE3wGg

    https://images.unsplash.com/photo-1490237014491-822aee911b99?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c6c99dec73e55acf9dbf720ec37f6b0a&auto=format&fit=crop&w=1350&q=80

    I've moved mine to assets/img/canyon.jpg. Now we can use this inside of our home page in the styles section of our @Component():

    @Component({
      selector: 'app-home',
      template: `
        <section class="hero is-info is-fullheight is-bold">
        <div class="hero-body">
        <div class="container">
    
          <h1 class="title">Home Page!</h1>
    
        </div>
        </div>
        </section>
      `,
      styles: [`
        .hero {
          background-image: url('/assets/img/canyon.jpg') !important;
          background-size: cover;
          background-position: center center;
        }
      `]
    })

    Now we have a good looking site!

    Referencing Assets in CSS

    To reference assets inside of CSS, we need to once again reference things from within the src folder. It is important to use the beginning forward slash also.

    Chris Sevilleja

    176 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.