Assignment 7 - Stashing Practice

Version Control Essentials

Assignment 7 - Stashing Practice

For this assignment, you will practice using Git stash to handle workflow interruptions while building a simple website project.

Show/Hide Video

Instructions

Part 1: Set Up Your Project

  1. Create a new project folder called your-name-stashing-practice. For example, john-doe-stashing-practice.

  2. Initialize it as a Git repository:

git init
  1. Create a basic HTML file called index.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Portfolio</h1>
    </header>
    
    <main>
        <p>This is my personal website where I showcase my work.</p>
    </main>
</body>
</html>
  1. Create a CSS file called styles.css:
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

header {
    text-align: center;
    margin-bottom: 30px;
}

h1 {
    color: #333;
}

main {
    max-width: 800px;
    margin: 0 auto;
}
  1. Make your initial commit:
git add .
git commit -m "Initial portfolio setup"
  1. Push your project to GitHub (create a new repository called your-name-stashing-practice)

Part 2: Feature Development with Interruptions

Scenario 1: Working on Navigation

  1. Start working on a navigation menu. Add this code inside the <header> section (after the <h1> tag) in your index.html:
<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>
  1. Add some CSS styling for the navigation in your styles.css file:
nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav li {
    margin: 0 15px;
}
  1. BEFORE committing this work, you realize you need to fix an urgent issue with the page title. Stash your navigation work:
git stash push -m "Working on navigation menu"

  1. Fix the urgent issue - change the page title from "My Portfolio" to "My Awesome Portfolio" in the <title> tag.

  2. Commit the title fix:

git add index.html
git commit -m "Fix: Update page title"
  1. Return to your navigation work:
git stash pop
  1. Complete the navigation by adding one more link in the HTML:
<li><a href="#contact">Contact</a></li>
  1. Commit your completed navigation feature:
git add .
git commit -m "Add navigation menu"

Scenario 2: Working on About Section

  1. Start working on an About section. Add this after the existing <p> tag in your index.html:
<section id="about">
    <h2>About Me</h2>
    <p>I'm a student learning web development and Git!</p>
</section>
  1. Add CSS styling for the About section in styles.css:
section {
    margin: 30px 0;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
}

h2 {
    color: #555;
}
  1. BEFORE committing, you need to pull the latest changes from your remote repository. Stash your About section work:
git stash push -m "Adding About section"
  1. Pull any updates from your remote repository:
git pull
  1. Restore your About section work:
git stash pop
  1. Complete and commit your About section:
git add .
git commit -m "Add About section"

Scenario 3: Working on Contact Information

  1. Start adding contact information. Add this section after your About section:
<section id="contact">
    <h2>Contact Me</h2>
    <p>Email: your.email@example.com</p>
</section>
  1. Realize you're working on the wrong feature! You should be working on a footer instead. Stash your contact work:
git stash push -m "Contact info work - wrong priority"
  1. Work on the footer instead. Add this before the closing </body> tag:
<footer>
    <p>&copy; 2025 My Portfolio. All rights reserved.</p>
</footer>
  1. Add footer CSS to your styles.css:
footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background-color: #333;
    color: white;
}
  1. Commit your footer:
git add .
git commit -m "Add footer"
  1. Now go back to your contact work:
git stash pop
  1. Finish and commit your contact section:
git add .
git commit -m "Add contact section"
  1. Push all your changes to GitHub:
git push

Part 3: Clean Up

  1. Check if you have any remaining stashes:
git stash list
  1. If you have any old stashes, clean them up:
git stash clear

Submission

Once you have completed all the tasks, submit the following in Blackboard:

  1. The URL of your GitHub repository

  2. Paste the output of the following command:

git log --oneline

  1. Answer these questions:

    • How many times did you use git stash push in this assignment?

    • Describe a real-world scenario where you might need to stash your work.

    • Why is it helpful to add messages to your stashes (using the -m flag)?

Note

Your final website should have a header with navigation, a main content area with About and Contact sections, and a footer. Make sure to test your HTML file in a browser to see how it looks!