Web Agency Website

Contents  >

HTML Project 6: Footer

Introduction

In this task you will use template content to add a footer section 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 on GitHub 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 four 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 HTML

Edit the footer CSS

Validate your HTML files

Validate your CSS file

Upload 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 best.
    • footer-template.html
    -or-
    • 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.

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 file from the <head> section of the footer template file to the <head> section your index.html and team.html web pages.

The services.html and contact.html web pages already contain the link to the Font Awesome CSS file.

  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 and team.html web pages, 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 and team.html web pages.

Copy-and-paste the footer HTML

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 section. 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 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.
  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.

Copy-and-paste the footer CSS

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 section. fa-icons-copy
  2. In your style.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.
  3. When finished, save your style.css stylesheet.

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

Edit the footer HTML

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

  1. In Visual Studio Code, open your index.html, services.html. team.html and contact.html web pages.
  2. Scroll down to the footer section you have pasted into each 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 four 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, services.html, team.html and contact.html web pages and view them in your web browser.

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

Edit the footer CSS

Your final step in working with the footer is to change its background colour so that it matches the rest of your project web page.

  1. In Visual Studio Code, open your style.css stylesheet.
  2. Scroll down to the .container-footer selector. This contains the style for the footer background colour. fa-icons-copy
  3. Change the colour value from the dark grey of #2c3e50 to the purple of #500294.   If you are using 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. For the .container-footer .item-3 p style, reduce the font-size slightly and add a font-weight value of 500. fa-icons-copy
  5. Open the index.html web page of this project, and add a hyperlink with a class of fancy-link to the 'Get in touch for a quick quote' text near the bottom of the page that links to the contact.html page.
  6. Open the services.html web page of this project, and add a hyperlink with a class of fancy-link to the 'Let's chat' text near the bottom of the page that links to the contact.html page.
  7. Open the team.html web page of this project, and add a hyperlink with a class of fancy-link to the Get in touch' text near the bottom of the page that links to the contact.html page.
  8. When finished, save your web pages and style.css stylesheet.

Display your four web pages in your web browser.

You can display a finished version of the project web pages on GitHub 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.

Validate your HTML files

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. One at a time, copy and paste each of your four HTML files into the box named Enter the Markup to validate.
  4. Click the Check button.
  5. If you see any errors, return to your 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 style.css file in Visual Studio Code, fix the errors, save the file, and copy the entire file again. typo-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 web-agency of your websites/portfolio folder.

So you will need to upload this web-agency 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 web-agency folder to the GitHub tab in your web browser. github-upload-drag-drop
  6. After uploading the web-agency 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 'Web Agency' project with the web page footers 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.