Contents  >

Software Project:
Footer

Introduction

In this task you will use template content to add a footer to the single-web page ‘Software’ project you created earlier and to which you then added an email sign-up form.

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

Web Design Project: Software Analytics 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 two HTML files

Copying-and-pasting the footer HTML

Working with your two CSS files

Copying-and-paste the footer CSS

Editing the footer hyperlinks

Editing the footer background colour

Uploading 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 better.
  2. From your websites\portfolio\software 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.

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

  1. In the footer template file, select and copy the footer. fa-icons-copy
  2. In your index.html web page, scroll down to near the end of the web page, to just before the closing </body> tag.
  3. Press the ENTER key a few times to open up some new lines of blank space, and paste the copied footer content.
  4. 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\software\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.

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

Uploading your project to GitHub

The final step is to upload your project to GitHub.

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

So the easiest option is simply to upload the entire software 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 software 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 ‘Software Analytics’ project web page 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/software/index.html

or, simply:

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

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



Return to Contents.