Other Pages

Expand All

Add A Link To Your Webpage

In this step, we'll download the starter code from tomorrow's workshop, and add a link to it from our webpace

Step 1: Download the starter code

Download the code from this link

Once you've downloaded the zip archive file, you will need to extract the contents and open index.html with your browser. If you have trouble extracting the files or opening them, get an instructor to help you out.

Step 2: Save the extracted files inside your GitHub pages git repository

Step 2.1: Make a new folder/directory

Navigate to your GitHub pages repository. Copy/paste the downloaded folder right next to your index.html webpage. Then, rename the folder to be snake-game.

Step 3: Add a list for showcasing your projects to your webpage

Step 3.1: Add a list for your projects to your website

Similar to the list of skills, add another list to your page for showcasing your projects.

Your code should now look something like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio</title>
  </head>
  <body>
    <h1>Rachel's <em>Portfolio</em></h1>
    <p>Welcome to my webpage!</p>

    <p>My Skills:</p>
    <ul>
      <li>HTML</li>
      <li>Javascript</li>
    </ul>

    <p>My Work:</p>
    <ul>
      <li>Javascript Snake game</li>
    </ul>
  </body>
</html>

Open your page in the browser to see the new section you added.

Step 4: Add a link from your index.html page to the starter code

An a tag is used in HTML to link to other pages on the web. The a stands for anchor. It has a href property that represents where the link goes to. The text inside the tag is what you will be able to click to navigate to the location specified in the href property.

<a href="https://en.wikipedia.org/wiki/Grace_Hopper">Grace Hopper</a>

you can also use anchor tags to link relatively to pages that are internal to your website, like we will be doing in this exercise.

Don't forget that you can nest tags. For an example, you can create a list (li) of links (a)

Step 4.1: Add an anchor tag for linking to your snake game

<!DOCTYPE html>
<html>
  <head>
    <title>Portfolio</title>
  </head>
  <body>
    <h1>Rachel's <em>Portfolio</em></h1>
    <p>Welcome to my webpage!</p>

    <p>My Skills:</p>
    <ul>
      <li>HTML</li>
      <li>Javascript</li>
    </ul>

    <p>My Work:</p>
    <ul>
      <li><a href="snake-game/index.html">Javascript Snake Game</li>
    </ul>
  </body>
</html>

The href points to snake-game/index.html because that is the location of the starter code webpage relative to your GitHub pages directory.

Step 4.2: Open your browser and admire your new list.

Step 5: Push your code to GitHub

Type this in the terminal:
git add .

The . tells git that you want to add everything in this folder - the changes to the index page and the snake game files.

Type this in the terminal:
git commit -m "add snake game project to my page"
Type this in the terminal:
git push -u origin master

Step 5.1: After a minute or two, observe your updated website live on GitHub pages

Navigate to [your-github-user-name].github.io and your updates should be live shortly!

If you'd like to take it a step further and add some style to your page, the frontend curriculum has some resources on CSS which will allow you do things like change fonts and background colors.

Next Step: