In this project you will create your personal website, based on sample website templates. Your website will have the following six web pages:
A single stylesheet named global.css will control the appearance of all the above web pages.
You can display a sample finished version of the website by clicking the image or text link below. The finished sample website will open in a new tab of your web browser.
Sample Portfolio Website
For your inspiration here is a selection of sample portfolio websites from web designers and developers around the world.
Your first step is to create the sub-folders that will store the web pages and other resources used by those various pages of your personal portfolio website.
Your websites folder currently contains a file named index.html that lists and links to the exercise files your created earlier in this course.
Rename this file to exercises.html.
If you have already done this, and then created a new index.html file, please rename this file to something else, such as index-old.html.
Now you will download the following six web pages.
In each case, right-click anywhere in the web page and choose View Page Source from the context menu displayed.
Next, right-click anywhere on the web page source and choose Save as... (Chrome) or Save Page As... (Firefox) from the context menu displayed.
Ensure the Save as type: dropdown list is set to Webpage, HTML only (*.HTML, *.htm).
You now have all six web pages you need for your personal website.
See the folder and file structure below.
Next, you need to download some placeholder asset files for your web pages.
Right-click on each image below, choose Save Image As from the context menu, and download it to your websites/assets/img sub-folder.
Now, download the following background video file to your websites/assets/videos sub-folder.
Finally, download the following sample CV in Adobe Acrobat format to your websites/assets/pdfs sub-folder.
Download the following stylesheet file to your websites/assets/css sub-folder.
This stylesheet file controls the appearance of all the pages on your personal website (except individual project web pages).
This CSS file has a few updates since you last downloaded it.
Download the updated stylesheet file to your websites/assets/css sub-folder.
The final step is to upload your website pages and folders to GitHub.
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:
It may take a few minutes for your uploaded files to appear on GitHub.
Return to Contents.