Contents  >

Your Personal Website

Introduction

In this project you will create your personal website, based on one of three sample website templates. Each of these website templates has four web pages:

For each of the three websites, there is one stylesheet file for all four pages, named global-1.css, global-2.css and global-3.css. These three stylesheets are in the assets/css sub-folder.

There are also a number of images, all located in the assets/img sub-folder.

You can display finished versions of the three websites by clicking the images below.

Project: Smooth Smoothies
Project: Smooth Smoothies
Project: Smooth Smoothies

Contents

Introduction

Create the project folders

Download the three sample Home web pages

Download the three sample Privacy web pages

Download the three sample Portfolio web pages

Download the three sample Contact web pages

Download the three sample CSS files

Download the image files

Choose the sample version for your personal website

Update the HTML file names

Update the menu hyperlinks in your web pages

Update the meta tags in the <head>

Update the Google Analytics ID

Update the privacy pop-up code and message

Update your contact details in the footer

Update your contact details in the mobile menu

Customise the design elements

Validate your HTML files

Validate your CSS file

Upload your home page files to GitHub

Create the project folders

Your first step is to create folders that will store the web pages, CSS files, and images you will download.

  1. If a folder named websites does not already exist on your computer, create it now.
  2. Inside the websites folder, create the following sub-folders if they do not already exist:   C:\websites\assets
    C:\websites\assets\css
    C:\websites\assets\img
    Powerpoint Project

Download the three sample Home web pages

Follow these steps to download the three 'Home' web pages to your websites folder.

  1. Go to the first sample Home web page at this web address:  https://ibat-web-dev.github.io/index-1.html
  2. Right-click anywhere on the page (except on an image) and choose View page source (Chrome or Mozilla Firefox). Powerpoint Project
  3. Right-click on the displayed text and choose Save as… (Chrome) or Save Page As… (Mozilla Firefox). Powerpoint Project
  4. In the File name: box, change the name of the file to index-1.html.
  5. In the Save as type: dropdown list, change from the default value Webpage, Complete to Web Page, HTML Only.
  6. Save the web page as index-1.html file in your C:\websites folder. Project portfolio
  7. Repeat these steps for the following two other sample Home pages:   https://ibat-web-dev.github.io/index-2.html   https://ibat-web-dev.github.io/index-3.html

You should now have these three HTML files saved in your C:\websites folder.

Project portfolio

Download the three sample Privacy web pages

Follow these steps to download the three 'Privacy' web pages to your websites folder.

  1. Go to the first sample Privacy web page at this web address:  https://ibat-web-dev.github.io/privacy-1.html
  2. Right-click anywhere on the page and choose View page source (Chrome or Mozilla Firefox). Project portfolio
  3. Right-click on the displayed text and choose Save as… (Chrome) or Save Page As… (Mozilla Firefox). Project portfolio
  4. In the File name: box, change the name of the file to privacy-1.html, change the Save as type: to Web Page, HTML Only and save the web page as privacy-1.html file in your C:\websites folder. Project portfolio
  5. Repeat these steps for the following two other sample Privacy pages:   https://ibat-web-dev.github.io/privacy-2.html   https://ibat-web-dev.github.io/privacy-3.html

You should now have these six HTML files saved in your C:\websites folder.

Project portfolio

Download the three sample Portfolio web pages

Follow these steps to download the three 'Portfolio' web pages to your websites/portfolio sub-folder.

  1. Go to the first sample Portfolio web page at this web address:  https://ibat-web-dev.github.io/portfolio/index-1.html
  2. Right-click anywhere on the page and choose View page source (Chrome or Mozilla Firefox). Powerpoint Project
  3. Right-click on the displayed text and choose Save as… (Chrome) or Save Page As… (Mozilla Firefox). Powerpoint Project
  4. In the File name: box, change the name of the file to index-1.html, change the Save as type: to Web Page, HTML Only and save the web page as index-1.html file in your C:\websites\portfolio sub-folder. Project portfolio
  5. Repeat these steps for the following two other sample Portfolio pages:   https://ibat-web-dev.github.io/portfolio/index-2.html   https://ibat-web-dev.github.io/portfolio/index-3.html

You should now have three HTML files saved in your C:\websites\portfolio sub-folder.

Project portfolio

Download the three sample Contact web pages

Follow these steps to download the three 'Contact' web pages to your websites/contact sub-folder.

  1. Go to the first sample Contact web page at this web address:  https://ibat-web-dev.github.io/contact/index-1.html
  2. Right-click anywhere on the page and choose View page source (Chrome or Mozilla Firefox). Powerpoint Project
  3. Right-click on the displayed text and choose Save as… (Chrome) or Save Page As… (Mozilla Firefox). Powerpoint Project
  4. In the File name: box, change the name of the file to index-1.html, change the Save as type: to Web Page, HTML Only and save the web page as index-1.html file in your C:\websites\contact sub-folder. Project contact
  5. Repeat these steps for the following two other sample Contact pages:   https://ibat-web-dev.github.io/contact/index-2.html   https://ibat-web-dev.github.io/contact/index-3.html

You should now have three HTML files saved in your C:\websites\contact sub-folder.

Project portfolio

That's it. You do not need to download any more HTML files.

Download the three sample CSS files

You will now download the three sample CSS files to the C:\websites\assets\css sub-folder.

  1. In your web browser, open the first CSS file at this web address:  https://ibat-web-dev.github.io/assets/css/global-1.css
  2. Right-click on the displayed CSS file, choose Save as… (Chrome) or Save Page As… (Mozilla Firefox). Project portfolio
  3. Save the global-1.css file in your C:\websites\assets\css sub-folder. Project portfolio
  4. Repeat these steps for the following two other CSS files:  https://ibat-web-dev.github.io/assets/css/global-2.css  https://ibat-web-dev.github.io/assets/css/global-3.css 

You should now have these three CSS files saved in your C:\websites\assets\css sub-folder.

Project portfolio

Download the image files

Follow these steps to download the various image files to the C:\websites\assets\img sub-folder.

Sample web pages: 1

Project: Smooth Smoothies
Project: Smooth Smoothies
Project: Smooth Smoothies

Sample web pages: 2

Project: Smooth Smoothies
Project: Smooth Smoothies
Project: Smooth Smoothies

Sample web pages: 3

Project: Smooth Smoothies
Project: Smooth Smoothies
Project: Smooth Smoothies

 

Portfolio project images

Project: Smooth Smoothies
Project: Smooth Smoothies
Project: Smooth Smoothies
Project: Smooth Smoothies
Project: Smooth Smoothies
Project: Smooth Smoothies

Menu images

Project: Smooth Smoothies
Project: Smooth Smoothies
 

Choose the sample version for your personal website

Review the three versions of the sample personal websites in your web browser. On a Windows PC, the 'Home' page files should be at the following locations:

file:///C:/websites/index-1.html
file:///C:/websites/index-2.html
file:///C:/websites/index-3.html

From the sample Home pages, click on the menu options to view the related Portfolio, Contact and Privacy web pages.

Which one of the three sample versions is closest to the one you would like for your own personal website?

Choose one.

You can change the text, fonts, colours and images of these web pages later, according to your requirements.

Update the HTML file names

Whichever of the three sample personal websites you choose, you will need to update the names of the four HTML files. Follow these steps.

  1. In Visual Studio Code, open your four chosen HTML files.   For example, index-1.html and privacy-1.html (in the main websites folder), index-1.html (in the websites/portfolio sub-folder) and index-1.html (in the websites/contact sub-folder). Project Portfolio
  2. Use the File | Save As command to save the four files with the following new names:   index.html and privacy.html (in the main websites folder)
    index.html (in the websites/portfolio sub-folder) and
    index.html (in the websites/contact sub-folder.

The folder and file structure for your four web pages should be as shown below. Project Portfolio

Leave all four of your web pages with their new file names open in Visual Studio Code.

Update the meta tags in the <head>

In the <head> of your four web pages, within the <title> and <author> meta tags, you can see the name 'Mary Smith.'

Replace this with your own name. You may also wish to change the sample text in the <description> meta tags.

vscode-meta-tags

When finished, save the four HTML files.

Update the Google Analytics ID

Near the top of your four HTML files, just before the closing </head> tag, you can see a sample Google Analytics Tracking Code.

vscode-ga

Each Google Tracking Code has a unique ID in its first and last line. For each of your fur web pages, replace the sample Google Tracking ID with your own Google Tracking ID. The instructions for viewing your website’s unique Google Tracking ID are here.

When finished, save your four HTML files.

Update the privacy pop-up code and message

You need to edit the ‘pop-up‘ privacy code and message in all four of your web pages.

  1. Within the <head> at the top of your HTML files, you can see a link to the stylesheet for the privacy pop-up message. vscode-privacy-head
  2. At the bottom of your web pages, just before the closing </body> tag, you can see the JavaScript code for the privacy pop-up message. vscode-privacy-body Near the end of the lines of the JavaScript code, you can see the web address of the privacy page. For all four web pages, change the ibat-web-dev.github.io username to your username on GitHub.
  3. When finished, save your four HTML files.

Update your contact details in the mobile menu

For all four web pages, in the flyout-menu section of the mobile menu, are more details you will need to change.

vscode-ga

Change the name 'Mary Smith', the profile image and the various contact details to your own. You can add or remove different social media contact points, such as Twitter, Facebook, YouTube or Instagram, as required.

When finished, save your four HTML files.

Customise the design elements

Feel free to make any changes you require to content and design of the four web pages.

When finished, save your four HTML files and your stylesheet.

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 after the other, copy and paste 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 files, 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 or as shown below or to the 'overscroll-behavior' property), return to your CSS file in your text editor, 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.

  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 websites folder and then drag-and-drop the following files and sub-folders to the GitHub tab in your web browser. github-upload-drag-drop
  6. After uploading, 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 pages are now published on GitHub. Your Home page has a web address similar to the following, where username is the username you have chosen for your GitHub account:

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

or, simply:

https://username.github.io

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



Return to Contents.