Contents  >

Web Agency Project:
Footer

Introduction

In this task you will use template content to add a footer to the web pages of the ‘Web Agency’ project you created earlier and to which you then added a contact form page.

You can display a finished version of the project web pages by clicking the image below.

Web Design Project: Web Agency 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

Introduction

Working with your five HTML files

Adding the <head> link for the Font Awesome icons

Copying-and-pasting the footer HTML

Working with your two CSS files

Copying-and-pasting the footer CSS

Editing the footer hyperlinks

Editing the footer background and font

Uploading your project to GitHub

Working with your four HTML files

You will begin by working with four 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 better.
    Sample image footer-template.html
    Sample image footer-template-2.html
  2. From your websites\portfolio\web-agency folder, open your web pages named index.html, services.html, team.html and contact.html web pages. fa-icons-copy If you have any other files open in Visual Studio Code, you may wish to close them. fa-icons-copy This will help you to focus only on the five HTML files you will be working with.

Adding the <head> link for the Font Awesome icons

Your footer will use Font Awesome 5 icons. Of the four web pages in this project, the services.html and contact.html web pages already contain the link to the Font Awesome CSS file.

So you need to add this link to the <head> of the two other web page in your ‘Web Agency’ project.

  1. In your index.html and team.html web pages, copy-and-paste the following comment line and code, just before the closing </head> tag. 
    <!-- Link to icons for Font Awesome 5 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous">
  2. When finished, save your index.html and team.html web pages.

Your next step is to copy content from the footer template file into your four web pages.

  1. In the footer template file, select and copy the footer. fa-icons-copy
  2. In your index.html, services.html, team.html and contact.html web pages:
    • Scroll down to near the end of the web page, to just before the closing </body> tag.
    • Press the ENTER key a few times to open up some new lines of blank space.
    • Paste the copied footer content.
  3. When finished, save your index.html, services.html, team.html and contact.html web pages.

You can now close both the template footer HTML file and your four saved web pages.

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\web-agency\assets\css folder, open your stylesheet named style.css. fa-icons-copy If you have any other files open in Visual Studio Code, 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.

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

  1. In your footer template CSS file, select and copy the footer. fa-icons-copy
  2. Switch to your style.css file, and, at the bottom, paste the copied footer styles.
  3. When finished, save your style.css stylesheet.

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

Editing the footer hyperlinks

Your next step is to edit the pasted content in your four web pages.

  1. In VS Code, open your index.html, services.html. team.html and contact.html web pages.
  2. Scroll down to the footer you have pasted into each web page.
  3. As required, edit or remove the email address and social media hyperlinks in the footer that are copied from the template file.
  4. Edit the hyperlinks to the three other web pages on your personal website as shown below.
    • 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>
      If you have chosen the footer-template-2.html, edit the privacy link as follows: 
        <a class="privacy-legal" href="../../privacy.html">Privacy & Legal</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, services.html, team.html and contact.html web pages.

You are now finished working with these HTML files and you can close them in Visual Studio Code.

You need to change the background colour of your footer so that it matches the rest of your project web pages.

  1. In VS Code, open your style.css stylesheet.
  2. Scroll down to the .container-footer selector. This contains the value for the footer background-color. fa-icons-copy
  3. Change the value from the dark grey of #2c3e50 to the purple of #500294.   If you have chosen the footer-template-2.html and footer-template-2.css template files, you may want to change the colour of the .container-footer h5 text from grey (#8d9093) to the pastel pink (#fef1ef).
  4. If you have chosen the footer-template.html and footer-template.css template files, for the .container-footer .item-3 p styles, add a font-weight value of 500. fa-icons-copy
  5. When finished, save your style.css stylesheet.

You can display a finished version of the project web pages by clicking the image below.

Web Design Project: Web Agency 2n2l.com Brendan Munnelly

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

Uploading your project to GitHub

The final step is to upload your project to GitHub.

All the files you have updated and added for this project are in the web-agency sub-folder of your websites/portfolio folder.

So the easiest option is simply to upload the entire web-agency sub-folder to your account on GitHub.

  1. If you are not already signed in to your GitHub account, sign in now.
  2. On the left of your GitHub home page, click the name of the repository that holds your web pages.
  3. On the next GitHub screen displayed, click the portfolio folder. GitHub Upload
  4. GitHub should now display your portfolio folder. github-upload-portfolio
  5. With the portfolio folder displayed on your GitHub screen, click the Add file button and, from the dropdown list displayed, choose the option Upload files. Project Animation Google Fonts
  6. In File/Windows Explorer on your computer, display your portfolio folder and then drag-and-drop the web-agency folder to the GitHub tab in your web browser. github-upload-drag-drop
  7. After uploading the software 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 updated ‘Web Agency’ project 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/web-agency/index.html

or, simply:

https://username.github.io/portfolio/web-agency

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



Return to Contents.