Telebort | Learning to code made fun!

bash

# Create new project
mkdir git-branching-practice
cd git-branching-practice

# Initialize and add initial content
git init
echo "# My Portfolio Site" > README.md
git add .
git commit -m "Initial commit with README"

# Create basic website structure
cat > index.html << 'EOF'
<!DOCTYPE html>
<html>
<head>
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>John Doe</h1>
        <p>Web Developer</p>
    </header>
    <main>
        <h2>About Me</h2>
        <p>I'm learning Git branching!</p>
    </main>
</body>
</html>
EOF

cat > styles.css << 'EOF'
body {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    text-align: center;
    padding: 40px 0;
    border-bottom: 2px solid #333;
}

main {
    padding: 40px 0;
}
EOF

git add .
git commit -m "Add basic portfolio structure"

bash

# Check current branch
git branch

# Create and switch to feature branch
git switch -c feature/add-projects-section

# Verify you're on the new branch
git branch
# The active branch should show with an asterisk

bash

# Add projects section to index.html
cat >> index.html << 'EOF'
    <section>
        <h2>My Projects</h2>
        <div class="project">
            <h3>Portfolio Website</h3>
            <p>My first website built with HTML and CSS</p>
        </div>
        <div class="project">
            <h3>Git Learning Journey</h3>
            <p>Mastering version control with Git and GitHub</p>
        </div>
    </section>
EOF

# Add CSS for projects
cat >> styles.css << 'EOF'

.project {
    background: #f5f5f5;
    padding: 20px;
    margin: 20px 0;
    border-radius: 5px;
}

.project h3 {
    margin-top: 0;
    color: #333;
}
EOF

# Stage and commit changes
git add .
git commit -m "Add projects section with two sample projects"

bash

# Add contact section
sed -i.bak 's|</body>|    <section>\
        <h2>Contact Me</h2>\
        <p>Email: john.doe@example.com</p>\
        <p>GitHub: github.com/johndoe</p>\
    </section>\
</body>|' index.html

# Style the contact section
cat >> styles.css << 'EOF'

section {
    margin: 40px 0;
}

section h2 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}
EOF

git add .
git commit -m "Add contact information section"

# View your branch history
git log --oneline

bash

# Switch to main branch
git switch main

# Look at index.html - notice the projects section is gone!
cat index.html

# Switch back to feature branch
git switch feature/add-projects-section

# Projects section is back!
cat index.html

bash

# Switch to main first
git switch main

# Create another feature branch
git switch -c feature/improve-styling

# Add a navigation menu
sed -i.bak 's|<header>|<nav>\
        <ul>\
            <li><a href="#about">About</a></li>\
            <li><a href="#projects">Projects</a></li>\
            <li><a href="#contact">Contact</a></li>\
        </ul>\
    </nav>\
    <header>|' index.html

# Style the navigation
cat > nav-styles.css << 'EOF'
nav {
    background: #333;
    padding: 1rem 0;
    margin: -20px -20px 20px -20px;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    color: #ddd;
}
EOF

# Link the new CSS file
sed -i.bak 's|<link rel="stylesheet" href="styles.css">|<link rel="stylesheet" href="styles.css">\
    <link rel="stylesheet" href="nav-styles.css">|' index.html

git add .
git commit -m "Add navigation menu with styling"

bash

# List all branches
git branch

# View branch history graphically
git log --oneline --graph --all

# See which branches have diverged
git show-branch --all

bash

# See differences between branches
git diff main feature/add-projects-section

# See differences between feature branches
git diff feature/add-projects-section feature/improve-styling

# List files that differ
git diff --name-only main feature/add-projects-section

bash

# Switch to main
git switch main

# Merge the projects feature (this will be a fast-forward merge)
git merge feature/add-projects-section

# View the updated main branch
git log --oneline --graph

# Check the website
cat index.html
# You should see the projects section

bash

# Now merge the styling feature
git merge feature/improve-styling

# This creates a merge commit because both branches had changes
git log --oneline --graph --all

# View the final website
cat index.html

bash

# Delete the merged feature branches
git branch -d feature/add-projects-section
git branch -d feature/improve-styling

# Verify cleanup
git branch
# Should only show main

bash

# Add remote
git remote add origin https://github.com/USERNAME/git-branching-practice.git

# Push main branch
git push -u origin main

bash

# Create new feature for footer
git switch -c feature/add-footer

# Add footer to index.html
sed -i.bak 's|</body>|    <footer>\
        <p>&copy; 2024 John Doe. All rights reserved.</p>\
        <p>Built with Git branching!</p>\
    </footer>\
</body>|' index.html

# Style the footer
cat >> styles.css << 'EOF'

footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 20px;
    margin: 40px -20px -20px -20px;
}

footer p {
    margin: 5px 0;
}
EOF

git add .
git commit -m "Add footer with copyright and build info"

# Push feature branch to GitHub
git push -u origin feature/add-footer

bash

# Switch to main and pull changes
git switch main
git pull origin main

# Delete local feature branch
git branch -d feature/add-footer

# View updated history
git log --oneline --graph

bash

# Create several branches quickly
git switch -c feature/mobile-responsive
echo "/* Mobile styles coming soon */" >> styles.css
git add . && git commit -m "Prepare mobile responsive styles"

git switch main
git switch -c bugfix/header-spacing
sed -i.bak 's|padding: 40px 0;|padding: 20px 0;|' styles.css
git add . && git commit -m "Fix header spacing issue"

git switch main
git switch -c experiment/color-theme
echo "/* Experimenting with new colors */" >> styles.css
git add . && git commit -m "Start color theme experiment"

bash

# List all branches with commit info
git branch -v

# See merged vs unmerged branches
git branch --merged
git branch --no-merged

# Rename a branch
git switch experiment/color-theme
git branch -m experiment/new-color-scheme

# View branch relationships
git log --oneline --graph --all --decorate

bash

# Merge only the bugfix
git switch main
git merge bugfix/header-spacing
git branch -d bugfix/header-spacing

# Keep other branches for later
git branch
# Should show: main, feature/mobile-responsive, experiment/new-color-scheme

bash

# You're working on a feature
git switch -c feature/user-dashboard
echo "<div>Dashboard coming soon</div>" >> index.html
git add . && git commit -m "Start user dashboard feature"

# URGENT: Bug reported in production!
# Switch to main and create hotfix branch
git switch main
git switch -c hotfix/critical-nav-bug

# Fix the bug (simulate by commenting out broken CSS)
sed -i.bak 's|nav a:hover {|/* nav a:hover {|' nav-styles.css
sed -i.bak 's|color: #ddd;|color: #ddd; */|' nav-styles.css
git add . && git commit -m "Fix navigation hover bug"

# Merge hotfix immediately
git switch main
git merge hotfix/critical-nav-bug
git branch -d hotfix/critical-nav-bug

# Back to feature development
git switch feature/user-dashboard
# Continue working on feature...

Activity 2: Branching Strategies

Activity 2: Branching Strategies