Smoothies Website

Contents  >

HTML Project 3: Footer

Introduction

In this task you will use template content to add a footer section to the 'Smoothies' project you created earlier and to which you then added an email sign-up form.

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

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

Copy-and-paste the footer HTML

Working with your two CSS files

Copy-and-paste the footer CSS

Edit the footer hyperlinks

Edit the footer background colour

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\smoothies 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.

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.
  3. 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\smoothies\assets\css folder, open your stylesheet named style.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 style.css web page.

  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 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>
  4. Save your index.html web page and view it in your web browser.

You are now finished working with this file and you can close it in Visual Studio Code.

Edit the footer background colour

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 deep pink of #d1274b.   If you are using the footer-template-2.html and footer-template-2.css template files, you will want to change the colour of the .container-footer h5 text from grey (#8d9093) to white (#fff).
  4. When finished, save your style.css stylesheet.

Display your web page 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: Smoothies 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 style.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 smoothies of your websites/portfolio folder.

So you will need to upload this smoothies 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 smoothies folder to the GitHub tab in your web browser. github-upload-drag-drop
  6. After uploading the smoothies 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 'Smoothies' 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/smoothies/index.html

or, simply:

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

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



Return to Contents.