Working with Internal Hyperlinks

Creating a Wikipedia-style web page navigation system with a smooth-scrolling visual effect.

Learning Goals

At the end of this Tutorial, you will be able to:

  • Use internal hyperlinks with a smooth-scrolling effect to create a web page navigation system.

The finished version of the sample web page to which you will add hyperlinks in this Tutorial should look as shown below.

Uploading your files to GitHub

After finishing your web page and stylesheet, you are now ready to upload them 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 username is your chosen username on GitHub.   username.github.io github-signin
  3. On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it. github-upload-portfolio
  4. From the dropdown list displayed, choose the option Upload files. Project Animation Google Fonts
  5. In File Explorer (Windows) or Finder (Apple Mac), drag-and-drop your 📁 exercises sub-folder to upload it to your repository on GitHub. Introduction to HTML
  6. Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
  7. Finally, click the green Commit changes button to upload your files. Project Animation Google Fonts

Your updated sample web page are now published on GitHub at web addresses similar to the following:

https://username.github.io/exercises/page-5.html

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