Introduction
Your personal portfolio website is based on the following four web pages:
- Home page (in main folder)
- Privacy page (also in main folder)
- Portfolio page (in 📁 portfolio sub-folder)
- Contact page (in 📁 contact sub-folder)
Your four pages will have the following web addresses.
For your inspiration, here are some sample portfolio websites from web designers and developers.
Some sample developer portfolio websites
For your inspiration, here are some sample portfolio websites from web designers and developers.
And here are some sample portfolio websites from students.
1: Rename your old index.html web page
In your 'main' 📁 websites folder, you already have a file named index.html. Before continuing, rename this file to exercises.html.
2: Download images
Your next step is to download the following seven images to your 📁 websites/assets/img sub-folder.
3: Download your custom.css stylesheet file
Do you want a light-coloured (or mostly light-coloured) website?
Or a dark-coloured (or mostly dark-coloured) website?
Download one of these two files to the 📁 assets/css sub-folder of your 'main' websites folder.
- custom.css (light theme)
- custom.css (dark theme)
Clicking on either link will automatically begin the download.
If this file downloads to your 📁 Downloads folder, delete it from there after you copy it to your 📁 websites/assets/css folder.
4: Download your Home page
Download one of these two files to your 'main' websites folder.
- index.html (light theme)
- index.html (dark theme)
Clicking on either link above will automatically begin the download.
If this index.html file downloads to your 📁 Downloads folder, delete it from there after you copy it to your 📁 websites folder.
Your 📁 Downloads folder can contain only one file named index.html at one time.
If you try to download a second file named index.html to your 📁 Downloads folder, Windows will automatically rename this second file to index-1.html or index-2.html and so on.
Open the following two files in VS Code.
- The index.html file in your 'main' websites folder.
- The custom.css file in your 'main' assets/css sub-folder.
5: Download your Portfolio page
You should already have a 📁 portfolio folder in your 'main' websites folder.
Download one of these two files to your 📁 portfolio folder.
- index.html (light theme)
- index.html (dark theme)
Clicking on either link above will automatically begin the download.
If this index.html file downloads to your 📁 Downloads folder, delete it from there after you copy it to your 📁 websites/portfolio sub-folder.
As part of the downloading process, your web browser may have changed the web address in the Privacy hyperlink near the bottom of the Portfolio web page. See below.
If this has happened, update the Privacy hyperlink as shown below.
<p class="privacy"><a href="../privacy.html">Privacy & Legal</a></p>
6: Download your Contact page
Create a new folder in your 'main' websites folder named contact.
Download one of these two files to your new 📁 contact folder.
- index.html (light theme)
- index.html (dark theme)
Clicking on either link above will automatically begin the download.
If this index.html file downloads to your 📁 Downloads folder, delete it from there after you copy it to your 📁 websites/contact sub-folder.
If this file downloads to your 📁 Downloads folder, delete it from there after you copy it to your 📁 websites/contact folder.
As part of the downloading process, your web browser may have changed the web address in the Privacy hyperlink near the bottom of the Contact web page. See below.
If this has happened, update the Privacy hyperlink as shown below.
<p class="privacy"><a href="../privacy.html">Privacy & Legal</a></p>
7: Download your Privacy web page
Download the file below to your 'main' website folder.
Clicking on either link will automatically begin the download.
If this file downloads to your 📁 Downloads folder, delete it from there after you copy it to your 📁 websites folder.
You do not need to update any details on this web page.
8: Verify your hyperlinks
Check your new folder structure and files look as shown below.
Click on the hyperlinks on each page - in the navbar, the main text, and in the footer - to verify that all work correctly.
9: Add the Google Analytics code
In the <head> of your Home, Portfolio and Contact web pages, ensure you have added a link to your Google Analytics account. It should look as shown below.
10: Personalise your meta tags
Each of your three sample web pages contains template text for the page's title and description tags. These two tags are examples of so-called meta-tags.
Your first task in personalising the sample web pages is to update the content of the meta tags with text of your own choice. Follow the steps below.
- In VS Code, open your web pages.
index.html
📁 contact/index.html
📁 portfolio/index.html - In the <head> of each web page, in the title and description tags, replace the sample text with your own details.
Here are a few examples.
Home page:
Portfolio page:
Contact page:
See the helpful links below for guidance on using the title and description meta tags on your web pages.
Meta tags: Further resources
What is a title tag?. From moz.com.
What is a meta description? From moz.com
Meta Tags for SEO: Definition, Examples, & Best Practices. From Neil Patel
Content Optimization Strategies: Meta Descriptions. From Brian Dean
DO NOT use the same meta tags on different web pages of the same website.
This 'confuses' Google and other search engines.
"When two, or more, of your pages contain similar title tags, it falls upon the search engine to try to determine which page the user really wants to see in their results. What happens is that some of your pages will get preferred ranking status, while others get ignored completely. " Source.
12: Create and add your cookie privacy message
Create a ‘pop-up’ cookie consent message and add it to your Home, Portfolio and Contact pages.
This is required under EU law for any web page that uses Google Analytics.
13: Update the endpoint of your contact form
You need update your contact/index.html web page with the endpoint code you received from the Formspree website.
- In VS Code, display the contact/index.html web page.
- Update the form's action value by copying-and-pasting the endpoint value from Formspree. See the example shown below.
- Save your contact/index.html file.
You can check your form is working by entering some details and clicking the Send button.
You are now ready to upload your files to your account on GitHub.
14: Create and submit a sitemap
Create a sitemap, edit it as appropriate, and upload it to the top-level folder of your website repo on GitHub:
Sign in to your account on Google Search Console and submit your sitemap.
15: Check for broken links
After you have uploaded your web pages to GitHub, run the Dead Link Checker on your https://username.github.io website.
You can ignore the following two apparent errors. This is a fault with the online link checker.
See the next Tutorial to continue building your personal portfolio website.