Hero Blocks Showcase

Contents  >

HTML Project 2: Footer

Introduction

In this task you will use template content to add a footer section with styles to the single-page 'Hero' website project you created earlier.

You can display a finished version of the project web page on GitHub by clicking the image below.

Web Design Project: hero 2n2l.com Brendan Munnelly

You can view the alternative version with the centred footer here.

Learning Goals

At the end of this Tutorial you will be able to:

Contents

Working with your two HTML files

Add the <head> link for the Font Awesome icons

Copy-and-paste the footer HTML

Working with your two CSS files

Copy-and-paste the footer CSS

Edit the footer hyperlinks

Validate your HTML file

Validate your CSS file

Upload your project to GitHub

Working with your two HTML files

You will begin by working with two HTML files:

Start Visual Studio Code.

  1. From your websites\templates folder, open one of the following two HTML files. You can choose whichever footer version you like best.
    • footer-template.html
    -or-
    • footer-template-2.html
  2. From your websites\portfolio\hero folder, open your web page named index.html. fa-icons-copy If you have any other files open in Visual Studio, you may wish to close them. fa-icons-copy This will help you to focus only on the two HTML files you will be working with.

Add the <head> link for the Font Awesome icons

Your footer will use Font Awesome 5 icons. So you need to copy and paste the link to the Font Awesome stylesheet CSS file from the <head> section of the footer template file to the <head> section your index.html web page.

  1. In the footer template file, select the Font Awesome link from the <head> section and copy it. fa-icons-copy
  2. In your index.html web page, paste the copied Font Awesome link in the <head> section, just after the link to Google Fonts as shown below. fa-icons-copy

When finished, save your index.html web page.

Copy-and-paste the footer HTML

Your next step is to copy content from the footer template file into your index.html web page.

  1. In the footer template file, select and copy the footer section. fa-icons-copy
  2. In your index.html web page
    • Scroll down to near the end of the web page, to just before the JavaScript for Cookie Consent Popup Message. fa-icons-copy
    • Press the ENTER key a few times to open up some new lines of blank space.
    • Paste the copied footer content.

When finished, save your index.html web page.

You can now close both the footer template file and your saved index.html web page.

Working with your two CSS files

Your next task is to work with two CSS files:

In Visual Studio Code:

  1. From your websites\templates folder, open one of the following two CSS files. Choose whichever one is for the footer template file you choose earlier.
    • footer-template.css
    -or-
    • footer-template-2.css
  2. From your websites\portfolio\hero\assets\css folder, open your stylesheet named hero.css. fa-icons-copy If you have any other files open in Visual Studio, you may wish to close them. fa-icons-copy This will help you to focus only on the two CSS files you will be working with.

Copy-and-paste the footer CSS

Your next step is to copy content from the footer template CSS file into your hero.css web page.

  1. In your footer template CSS file, select and copy the footer section. fa-icons-copy
  2. In your hero.css file:
    • Scroll down to the end of the stylesheet and click on the last empty line. fa-icons-copy
    • Press the ENTER key a few times to open up some new lines of blank space.
    • On the new last line, paste the copied footer styles.

When finished, save your hero.css stylesheet.

You can now close both the template footer CSS file and your saved hero.css stylesheet.

Edit the footer hyperlinks

Your next step is to edit the pasted content and links in your index.html file.

  1. In Visual Studio Code, open your index.html web page.
  2. Scroll down to the footer section you have pasted into your web page.
  3. You do not need to change the email address or social media hyperlinks you have included in your footer.   But you will need to edit the hyperlinks to the three other web pages on your website as follows.   Edit the link to your website Home page as follows: 
    • 
<a href="../../index.html">Home</a>
    • Edit the link to your website Portfolio page as follows: 
      
<a href="../index.html">Portfolio</a>
    • Edit the link to your website Privacy page as follows: 
      
<a href="../../privacy.html">Privacy</a>
    • And if your footer has a link to your website Contact Form page, edit it as follows: 
      
<a href="../../contact/index.html">Contact</a>

Save your index.html web page and view it in your web browser.

You can display a finished version of the project web page on GitHub by clicking the image below.

Web Design Project: hero 2n2l.com Brendan Munnelly

You can view the alternative version with the centred footer here.

Validate your HTML file

To check your HTML is correct, use the official W3C Markup Validation Service. Follow these steps.

  1. Go to this web page: https://validator.w3.org.
  2. Click the Validate by Direct Input tab. validate-html
  3. Copy and paste your HTML file into the box named Enter the Markup to validate.
  4. Click the Check button.
  5. If you see any errors, return to your index.html file, fix the errors, save the file, and copy the entire file again.  In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Validate your CSS file

To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.

  1. Go to this web page: https://jigsaw.w3.org/css-validator.
  2. Click the By direct input tab. Project Hero Blocks
  3. Copy and paste your CSS file into the box named Enter the CSS you would like validated.
  4. Click the Check button.
  5. If you see any errors (other than those related to the fluid typographic equation, as shown below), return to your hero.css file in Visual Studio, fix the errors, save the file, and copy the entire file again. ypo-css-errors
  6. In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Upload your project to GitHub

The final step is to upload your project to GitHub.

All the files for this project are in a sub-folder named hero of your websites/portfolio folder.

So you will need to upload this hero sub-folder, which contains both files and other sub-folders, to your account on GitHub.

  1. Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now. github-signin
  2. On your GitHub home page, click the name of the repository ('repo') that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io   github-repo
  3. The next GitHub screen displayed should look as follows. Click on the portfolio folder. GitHub Upload
  4. On the next screen displayed, click the Upload files button. github-upload-portfolio
  5. In File/Windows Explorer on your computer, display your portfolio folder and then drag-and-drop the hero folder to the GitHub tab in your web browser. github-upload-drag-drop
  6. After uploading the hero folder, scroll down to the bottom of the GitHub screen, enter a short message in the Commit changes box, click the Commit changes button, and wait for the upload to complete. github-upload-progress

Your 'hero' project web page with the footer is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/portfolio/hero/index.html

or, simply:

https://username.github.io/portfolio/hero

It may take a few minutes for your uploaded files to appear on GitHub.



Return to Contents.