Your Store Project

An online book store affiliated with Amazon.

Please do this Store project only after you have completed your Personal Portfolio website project.

Introduction

A number of online retailers offer what are called affiliate programmes. An affiliate programme is an agreement in which a business such as Amazon pays you ('the affiliate') a commission for sending traffic from your website to theirs that results in the purchase of a product or service.

For more information, see:

50+ of the Best Affiliate Programs That Pay the Highest Commission

In this project, you will build a web page that offers affiliate links to four books from the Amazon UK online store.

Your Store page will have the following web address.

project images

Create your folder structure

Your first task is to create the folder structure you need for your online store.

  1. Inside your β€˜main’ πŸ“ websites folder, create a sub-folder to hold the files for your Store project.   Name the new sub-folder πŸ“ store (all small letters).
  2. Inside this new folder, create an πŸ“ assets sub-folder.   And inside this, create an πŸ“ img sub-folder.

βœ…  All done. You now have created the required folder with sub-folders for your store.

There is no need to create a πŸ“ store/assets/css sub-folder or download a new CSS file. Your Store web page will be linked to the same custom.css stylesheet as the other web pages in your personal website.

Download your product images

Your next step is to download the following four images to your πŸ“ websites/store/assets/img sub-folder.

That's it. You now have all the images you need.

Download your Store template web page

Download one of these two files to your πŸ“ websites/store folder.

Choose the same light or dark-themed version as you have chosen for your Home, Portfolio and Contact pages.

When saving an HTML page, ensure the Save as type: dropdown list is set to Webpage, HTML only (*.HTML, *.htm).

Open the downloaded index.html file in VS Code.

File Explorer

Personalise your Store web page

You will need to update the template index.html Store page with your own details.

Update the <head> of the web page

  1. Update the <title> tag with your own name.
  2. Copy-and-paste your favicon code from your Portfolio or Contact web page. The code will be similar to that shown below. Note the ../ at the start of the file paths.
    <link rel="apple-touch-icon" sizes="180x180" href="../assets/img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../assets/img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/img/favicon-16x16.png">
    <link rel="manifest" href="../assets/img/site.webmanifest">
  3. Add whatever Google Font(s) you are using on the rest of your website. You can copy the Google Fonts code from your Home, Portfolio or Contact web pages.

Update the <nav> of the Store web page

Replace the sample logo with your own.

Join the Amazon Associates Programme

Your next task is to join the Amazon Associates Programme. Here are the steps:

  1. Go to the Amazon UK home page.
  2. Scroll down to the footer and click the Associates Programme link.
  3. You will see a web page similar to that below. Click the yellow Sign up button.
  4. Enter your Email and chosen Password. If you already have a customer account with Amazon UK, you can reuse the same Email and Password details.
  5. Enter further details as required to complete the signup process.

Your Associates ID

As part of your registration, you will be asked to enter an Amazon Associates ID.

For example, if your name is Mary Smith, you could enter msmith.

Amazon will then generate a unique Associates ID such as msmith-1234.

Amazon will also provide you with a hyperlink to your Associates ID. You can use this hyperlink to test that your Associates ID is working correctly.

Upload your Store folder to GitHub

After finishing your Store project, you are now ready to upload it 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 β€˜repo’ that holds your web pages. Its name will look as follows, where marysmith is your chosen username on GitHub.   marysmith.github.io github-signin
  3. You are now shown the β€˜repo’ that holds the files for your website. github-signin
  4. Click the Add file button and then choose the Upload files option. github-upload-portfolio Your Github screen should now look similar to that shown below. github-upload-portfolio Leave this tab open in your web browser.
  5. Open your File Explorer (Windows) or Finder (Apple Mac) and display your πŸ“ websites folder.
  6. Click once on your πŸ“ store folder to select it.
  7. Drag-and-drop your πŸ“ store folder to your GitHub web browser tab. Your GitHub screen should now look as follows.
  8. At the bottom of the GitHub screen, accept or edit the short message (Add files via upload) in the Commit changes box.
  9. Finally, click the green Commit changes button to upload your files. Project Animation Google Fonts

Your Store project is now published on GitHub at a web address similar to the following:

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

or simply:

https://username.github.io/store

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