The focus of this tutorial is to design and create the home page. We’ll begin with this simple design.
The focus of this tutorial is to design and create the home page. We’ll begin with this simple design.
There is a nav bar at the top with 2 navigation items, some text in the middle, and a background image.
To begin, have your app opened on the browser.
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.
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.
For the path, we leave it empty to represent the root and for the component, we want to use the Home Component.
Modifying the Home Component
Go to the home component HTML page and remove the default code.
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 {
For home page, we want the width and height to be 100% of the window so it will take the entire page.
#home-page {
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.
If we take a look at our design again, we have some contents in the center.
Go back to the Home Component CSS file and turn the home-page-landing div into a grid layout. Use:
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.
Inside the landing-left-content div, add a header, a paragraph, and a button element.
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.
With the Angular Material Button module, we can easily apply styles to our buttons such as these.
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.
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.
Go to the home component CSS file and add the selectors for landing-left and landing-content.
#landing-left {
#landing-left {
Then for the landing-left-content selector, use
text-align: right - to align the contents to the right
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.
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.
Lastly, set the minimum height of the home-page-landing div to 800px. This way, our website will be responsive to all screen sizes.
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.
<div id="nav-bar">
<div id="nav-bar">
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.
So far, we’re on the right track, we have our bar, and 2 items.
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.
For nav-bar-content, we want to turn it into a grid layout with 2 grids with a height that matches the nav-bar.
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.
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.
Add another selector for nav-bar-right and use:
#nav-bar-right {
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.
Go back to the app component HTML page and apply the nav-bar-items class to the navigation items.
<div id="nav-bar">
That is all for this tutorial.