duckareawsome

Your Portfolio Page

Show off your peacock feathers as you begin to spread your wings and take flight into the world software development. Okay, peacocks can’t fly, but you get the point - your portfolio will give you a place to work and show off your coding projects!

Table of Contents

Prerequisites

Overview

🎯 Goal: Create a portfolio page for your website. This page will contain links to your projects and serve as a showcase for your coding skills.

Specs

Type of App

You’re building a website that will be live on the internet through your GitHub page. It’s designed to be viewed in any web browser, like Chrome.






Lesson Steps

Work Flow: How to Navigate Through the Lesson Steps

🎯 Goal: Follow the steps in this lesson to build and customize your website one step at a time.

Step-by-Step Work Flow

  1. 📂 Open the portfolio.html file in your codespace to get started.

  2. Look for TODO sections in the README:
    • Each TODO has instructions for what you need to do next.
    • These steps will tell you where to place new code inside the existing tags.
  3. Follow the instructions carefully for each TODO:
    • Pay attention to where code should go (inside <head> or <body>).
    • If a step asks you to add or remove code, only make those changes—don’t change anything else unless instructed.

  4. 🖥️ Preview your site regularly using Live Server to see how your changes affect the website.

  5. Build gradually:
    • Each TODO builds on the previous one, so complete them in order.
    • Take your time to double-check your code before moving on to the next step.
💡 Key Reminders
- 📖 Read each step closely before adding any code.
- 🎯 Only add code if a TODO step tells you to.
- 🖥️ Preview frequently to make sure everything is working correctly.


✅ Check Your Work!





TODO 0: Preview Your Site with Live Server

🎯 Goal: Preview your site in the browser to see how it looks and behaves as you make changes.

Step-by-Step Instructions

There are two ways to open your project with Live Server:

Option 1: Right-Click Method

  1. 📂 Find the index.html file in the file tree on the left side of your codespace.
  2. Right-click on index.html and select “Open with Live Server.”
Right-click 'Open with Live Server'

Option 2: Go Live Button in the Bottom Panel

  1. Look at the bottom-right corner of your codespace.
  2. Click the “Go Live” button to launch Live Server.
Go Live button in GitHub Codespaces
💡 Why Use Live Server?
Live Server allows you to instantly preview your website as you edit the code. It automatically refreshes the browser every time you update your code, so you can see changes right away without needing to reload manually.


✅ Check Your Work!





TODO 1: Create Portfolio Page

🎯 Goal: Build a new portfolio page from scratch.

Step-by-Step Instructions

  1. 🔍 Find the file tree

    • Look to the left side of your codespace and find the list of project files and folders.

  2. Open the portfolio.html file

    • 📂 Inside the file tree, click on portfolio.html to open it.

  3. Add the following boilerplate HTML to your file to set up the basic structure:

    <!DOCTYPE html>
<html>
  <head>
    <title>CHANGE ME</title>
  </head>

  <body>
    <!-- All content goes here -->
    <div id="all-contents">
         
    </div>
  </body>
</html>
💡 Why Use Boilerplate Code?
Boilerplate code is useful when working on similar projects. Because the portfolio page will match styles with the home page, you can use the same starter code for both files.






TODO 2: Add a Title

🎯 Goal: Add a title to your portfolio page to match the one on your homepage.

Step-by-Step Instructions

  1. 🔍 Locate the <title> element inside the <head> element

  2. Update the text inside <title>

    • Replace the text that says CHANGE ME with to match the title you added to your home page.

Your updated <head> tag should look like this:

<head>
  <title>My Awesome Website</title>
</head>
💡 Why Add a Title?
The title defines what appears in the browser tab. A meaningful title gives visitors an idea of what your site is about.


✅ Check Your Work!





TODO 3: Create Sections for the Menu and Main Content

🎯 Goal: Organize your webpage by adding two key sections — a navigation menu and a main content area. You’ll do this by placing <nav> and <main> elements inside the <div id="all-contents"> element.

Step-by-Step Instructions

  1. 🔍 Locate the <div id="all-contents"> element

    • Find this part of the code:

      <!-- All content goes here -->
<div id="all-contents">
       
</div>

  2. Place the <nav> and <main> elements inside the <div id="all-contents"> element

    • Your code should now look like this:

      <div id="all-contents">
  <nav>

  </nav>

  <main>

  </main>
</div>
💡 What’s the Purpose of <nav> and <main>?
<nav>: Holds links to other parts of your website (like a menu).
<main>: Contains the primary content visitors will see. Separating these sections helps organize your code and makes it easier to style with CSS.


✅ Check Your Work!





TODO 4: Add a Site Title and Navigation

🎯 Goal: Give your site a title and create a navigation menu to help visitors move between pages.

Step-by-Step Instructions

  1. 🔍 Find the <nav> element

    • Look for the following section in your code:

      <nav>
     
</nav>

  2. Add a title inside the <nav> element

    • Place an <h1> element inside <nav>. Between the opening and closing <h1> tags, type the title of your website. Use the same text you used for your home page to stay consistent. 
      <h1>Your Name's Amazing Website</h1>

  3. Create an unordered list for your navigation menu

    • Below the <h1> element, add a <ul id="nav-ul"> element:

      <ul id="nav-ul">

</ul>

  4. Add two list items for the menu

    • Inside the <ul> element, add the following two <li> elements:

      1. One to link to your home page

        <li class="nav-li">
  <a href="index.html">Home</a>
</li>

      2. Another to link to your portfolio page

        <li class="nav-li">
  <a href="portfolio.html">Portfolio</a>
</li>

After completing this TODO, your <nav> section should look like this:

<nav>
  <h1>Your Name's Amazing Website</h1>
  <ul id="nav-ul">
    <li class="nav-li">
      <a href="index.html">Home</a>
    </li>
    <li class="nav-li">
      <a href="portfolio.html">Portfolio</a>
    </li>
  </ul>
</nav>
💡 Why Add a Navigation Menu?
A navigation menu makes it easy for visitors to move between different parts of your site. It’s also a great way to learn how to link pages together using anchor tags (<a>).


✅ Check Your Work!





TODO 5: Create the Main Content

🎯 Goal: Add a section to display your projects.

Step-by-Step Instructions

  1. 🔍 Find the existing <main> element in portfolio.html.

    • It should look like this:

      <main>

</main>

  2. Create a new section to hold the content:

    • Add a new <div> element inside the <main> element.
    • Add a class="content" attribute to the new <div>.

  3. Add a header inside the new <div> to label this section:

    • Place an <h1> tag inside the <div class="content">
    • Add the text Portfolio inside the new <h1>.

  4. Create an empty unordered list to display your projects later:

    • Add a <ul> element below the <h1> tag.
    • Add an id="portfolio" attribute to the <ul> elemnt

After completing these steps, your <main> section should look like this:

<main>
  <div class="content">
    <h1>Portfolio</h1>
    <ul id="portfolio">

    </ul>
  </div>
</main>
💡 Why Add Headers and Lists?
Headers help organize your content and make it easier to read. Unordered lists are great for displaying items, such as project links or features.


✅ Check Your Work!





🎯 Goal: Add links to your upcoming projects.

Step-by-Step Instructions

  1. 🔍 Find the <ul id="portfolio"> element you added in the previous step.

  2. Add these three <li> elements with links to your projects into the <ul> element:

    <li>
  <a href="fsd-projects/platformer/">Platformer: A cannon-dodging adventure game for Halleb0t</a>
</li>
<li>
  <a href="fsd-projects/bouncing-box/">Bouncing Box: A fun introduction to web game development</a>
</li>
<li>
  <a href="fsd-projects/circularity/">Circularity: A poetic motion experiment with circles</a>
</li>
💡 Why Link Projects?
Adding project links showcases your work and makes it easy for visitors to explore your creations.


✅ Check Your Work!






TODO 7: Add CSS

🎯 Goal: Link your CSS stylesheet and style the portfolio page.

Step-by-Step Instructions

  1. 🔍 Find the <head> tag inside portfolio.html.

  2. Add a <link> tag inside the <head> element to link the CSS file.

    • Note that the link tag does not require a closing tag
  3. Add a rel="stylesheet" attribute and href="style.css" attribute inside the <link> tag
    • Your code should now look like this: 
      <head>
  <title>Your Name's Website</title>
  <link rel="stylesheet" href="style.css" />
</head>
  4. Open the style.css file and add the following styles to the bottom of the file: 
    /* Portfolio styles */
.content h1 {
  color: black;
}

#portfolio {
  list-style-type: none;
  padding-left: 0;
}

#portfolio li {
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
}

#portfolio li:hover {
  background: #eee;
}

#portfolio a {
  text-decoration: none;
  color: #454545;
}
💡 Why Add CSS?
CSS makes your site look polished by controlling colors, layouts, and fonts. Styling helps create a better user experience.


✅ Check Your Work!





Extra CSS Challenges

Here’s some other things to try:


Here’s some CSS to get you started on making your website mobile responsive. You can add this code to the bottom of your CSS file.

/* responsive web design */
@media screen and (min-width: 120px) and (max-width: 1080px) {
  main {
    height: 100ch;
    zoom: 1.5;
    display: grid;
  }

  h1 {
    font-size: 44px;
  }

  h2 {
    font-size: 42px;
  }

  h3 {
    font-size: 36px;
  }

  #all-contents {
    height: 100ch;
    margin: none;
  }

  a {
    font-size: 42px;
  }

  .sidebar {
    margin-right: 0px;
    justify-content: center;
    align-items: center;
  }

  .sidebar-img {
    width: 100%;
  }

  p,
  li {
    font-size: 24px;
  }

  .content {
    align-content: center;
    justify-content: center;
  }
}


✅ Check Your Work!

If you made any changes in the “Extra Challenges” section:





TODO 8: Go Live

🎯 Goal: Push your changes to GitHub and make your portfolio go live.

Step-by-Step Instructions

  1. Open the terminal in your codespace

    • If the terminal isn’t visible, click the Hamburger Menu > Terminal > New Terminal.

  2. Enter the following commands one by one in the terminal, pressing enter after each command to run it:

    git add .
git commit -m "add portfolio page to website"
git push

  3. Wait a few minutes for the changes to go live at your-username.github.io.

💡 What is Git?
Git is a tool that tracks changes to your code. It helps you manage different versions of your project and makes it easier to collaborate with others.
🛠️ Basic Git Commands Explained
git add: Stages (or prepares) your changes, telling Git which files you want to track.

git commit: Saves a snapshot of the changes you’ve staged. It’s like taking a picture of your work at a specific moment in time.
  • The message added to the git commit command should always be customized to describe the work you've completed.

git push: Sends your committed changes to the remote repository (e.g., GitHub) so others can see or use your work.


✅ Check Your Work!



🎉🎉🎉 Congratulations! You can now share your project portfolio with others! 🎉🎉🎉