Video Tutorials

Policy

Twitter LogoFacebook Logo
Project 1: Building a Social Media Site Part 2: Home Page
The focus of this tutorial is to design and create the home page.
By: King

The focus of this tutorial is to design and create the home page. We’ll begin with this simple design. 

Image from Codeible.com

There is a nav bar at the top with 2 navigation items, some text in the middle, and a background image.


If you have not already, download the resource files that are used in the project. 

To begin, have your app opened on the browser. 


Go into the app component HTML page and remove all the generated code so we are left with an empty page.

In our design, we have an image that fills the entire page. If you are using the files from this video, locate the folder and drag the image call home_background into the assets folder.  

Image from Codeible.com

Open the terminal and run the ng generate component command to create the home page. Place it in a directory call pages.

ng generate component pages/home

This will generate the  component files in a directory call pages. 


Go into the app routing module and add a route to the root path.

If you recall in the earlier tutorials, to create a route, add a JSON object inside the routes array. Then provide 2 properties:

(1) path
(2) component

const routes: Routes = [
  {path: "", component: null}
];

For the path, we leave it empty to represent the root and for the component, we want to use the Home Component.

const routes: Routes = [
  { path: "", component: HomeComponent }
];

Do not forget to add a wildcard route as well. This will prevent the user from getting an error when they try to go to a route that does not exist.

Use the double asterisk symbol to represent the wildcard route.

const routes: Routes = [
  { path: "", component: HomeComponent },
  { path: "**", component: HomeComponent }
];

Modifying the Home Component

Go to the home component HTML page and remove the default code. 


1) Add a div element and give it an id call home-page
2) Inside the home-page div, add another div element and give it an id call home-page-landing to represent the whole page content where our image will be placed.

<div id="home-page">
    <div id="home-page-landing">

    </div>
</div>

Go to the home component CSS file and add the selectors for the 2 ids that we have given the elements.

Home Component CSS

#home-page {


}

#home-page-landing {

}

For home page, we want the width and height to be 100% of the window so it will take the entire page.

#home-page {

   width: 100%;
   height: 100%;
}

For the landing content, we want it to match the width and height of the home page so we will set them to 100% as well. 


Add the background-image property and apply the home background image.  Then set the background-size to cover and the background-position to center.  

This will stretch and place the background image in the center so it will be responsive when we resize the window.

#home-page-landing {
    width: 100%;
    height: 100%;
    background-image: url("src/assets/home_background.png");
    background-size: cover;
    background-position: center;
}

If we take a look at our design again, we have some contents in the center. 


To achieve this, we’ll use a grid layout with 2 grids. For the grid on the left, there will be another div element inside so we can place our contents in the middle vertically.

Image from Codeible.com

Go back to the Home Component CSS file and turn the home-page-landing div into a grid layout. Use: 

display: grid
grid-template-columns: 1fr 1fr
grid-template-rows: 100%

#home-page-landing {
    width: 100%;
    height: 100%;
    background-image: url("src/assets/home_background.png");
    background-size: cover;
    background-position: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100%;
}

Go to the Home Component HTML page and add 2 div elements inside the landing div. The first one will represent the left grid and the second one will represent the right grid. Give the left grid an id call landing-left and then add another div inside. Name it landing-left-content.

<div id="home-page">
    <div id="home-page-landing">

       <div id="landing-left">
            <div id="landing-left-content">
            </div>
        </div>

        <div>

        </div>

    </div>
</div>

Inside the landing-left-content div, add a header, a paragraph, and a button element. 

<div id="landing-left">
   <div id="landing-left-content">

        <h1>Social Media App Platform</h1>
        <p>
              Share your favorite stories! #Codeible
        </p>
        <button>Get Started</button>

   </div>
</div>

For the button I want to use the styles from Angular Material.

Adding Angular Material Buttons

Go to the app module file and add the MatButtonModule to the project. Add the import statement and add it to the app. 

...

import { MatButtonModule } from '@angular/material/button';


@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    ...
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor(){
    FirebaseTSApp.init(environment.firebaseConfig);
  }
}

With the Angular Material Button module, we can easily apply styles to our buttons such as these.

Image from Codeible.com

Modifying Home Component Continued

Go back to the home component HTML page and apply the mat-flat-button attribute to get the flat button styles and the set the color to warn so we get the orange color.

<div id="landing-left">
   <div id="landing-left-content">

        <h1>Social Media App Platform</h1>
        <p>
              Share your favorite stories! #Codeible
        </p>
        <button mat-flat-button color="warn">Get Started</button>

   </div>
</div>

If we look at our website on the browser, it is not quite there. We have to change the size and position of the elements. 

Image from Codeible.com

Go to the home component CSS file and add the selectors for landing-left and landing-content.

#landing-left {


}

#landing-left-content {

}

For landing-left use:

display flex
justify-content: center
align-items: center

Justify-content: center will align the items in the center horizontally and align-items: center will align the items in the center vertically. 

The display: flex property enables the 2 properties to do that. This will place our landing-left-content div in the middle. 

#landing-left {

   display flex;
   justify-content: center;
   align-items: center;
}

Then for the landing-left-content selector, use 

text-align: right - to align the contents to the right 

padding: 1em 1em 1em 3em.

#landing-left-content {
   text-align: right;
   padding: 1em 1em 1em 3em;
}

If we go back to the website on the browser, we are almost there. We just need to modify the font size of the text.

Image from Codeible.com

For the header element, set the font size to 5em, for the paragraph element, set it to 3em, and for the button, set it to 2em. Also give the button a padding of .5em on all sides.

#landing-left-content  h1 {
    font-size: 5em;
}

#landing-left-content  p {
    font-size: 3em;
}

#landing-left-content  button {
    font-size: 2em;
    padding: .5em;
}

Lastly, set the minimum height of the home-page-landing div to 800px. This way, our website will be responsive to all screen sizes. 

#home-page-landing {
    width: 100%;
    height: 100%;
    background-image: url("src/assets/home_background.png");
    background-size: cover;
    background-position: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100%;
    min-height: 800px;
}

Image from Codeible.com

Adding the Navbar

How the navbar will work, is that, it will be a fixed bar at the top of the web page. It will have a grid layout with 2 grids and inside each grid, there will have a div element and the contents will be aligned to the left and right.

Go to the app component HTML page. We want to place the navigation bar where the router-outlet is because we want it to appear on all pages of the website. 


To begin, add a div element and give it an id call nav-bar. This will represent the bar.

<div id="nav-bar">


</div>

Add another div inside to represent the grid layout. Call it nav-bar-content. 

Then add 2 more div elements inside to represent the 2 grids. Call the left one nav-bar-left and the right one nav-bar-right.

Inside each grid, we will have the 2 navigation items.

<div id="nav-bar">

   <div id="nav-bar-content">

       <div id="nav-bar-left">
           <div>Codeible</div>
       </div>

       <div id="nav-bar-right">
           <div>Login</div>
       </div>

   </div>
</div>

Lets see how it looks on the browser. As best practice, you should always view your website often when building it so you can see what you need to do next.

Image from Codeible.com

So far, we’re on the right track, we have our bar, and 2 items. 


Go to the app component CSS file and add the selectors for nav-bar, nav-bar-content, and nav-bar-left and right.

#nav-bar {

}

#nav-bar-content {

}

#nav-bar-left, #nav-bar-right {

}

For nav-bar, we want it to be fixed at the top left corner, have a width of the window, a height of 5em, and a z-index of 10 so it will be above most of our elements. 

#nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5em;
    z-index: 10;
}

For nav-bar-content, we want to turn it into a grid layout with 2 grids with a height that matches the nav-bar.

#nav-bar-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100%;
}

In nav-bar-left and right, we want to set the display to flex so we can align the contents inside.

Use align-items: center to align the contents in the middle vertically and set the height to match the grid.

Lastly set the padding on both ends to 2em, the color of the text to white, and set the box sizing to border-box so it will calculate the paddings.

#nav-bar-left, #nav-bar-right {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 2em;
    color: white;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

Lets go back to the browser and see how it looks. Its close but not quite. The login button is on the left side of the right grid.

Image from Codeible.com

Add another selector for nav-bar-right and use: 


justify-content: flex-end 

to align it to the right

#nav-bar-right {

   justify-content: flex-end;
}

Create a new CSS class for the navigation items, call it nav-bar-items. Set the font-size to 1em, the display to inline-block, and the cursor to pointer.

.nav-bar-items {
    font-size: 1em;
    display: inline-block;
    cursor: pointer;
}

Go back to the app component HTML page and apply the nav-bar-items class to the navigation items.


For the title navigation in the left grid, I want it to be slightly larger than the login one so I will use a inline style to set the font-size to 1.5em.

<div id="nav-bar">

   <div id="nav-bar-content">

       <div id="nav-bar-left">
           <div 
                style="font-size: 1.5em;" 
                class="nav-bar-items">
                   Codeible
           </div>
       </div>

       <div id="nav-bar-right">
           <div class="nav-bar-items">Login</div>
       </div>

   </div>
</div>

That is all for this tutorial.


Sign In