Skip to main content

Practical Exercise: Git Workflow

Table of contents​

  1. Exercise objectives
  2. Prerequisites
  3. Part 1: Creating the project
  4. Part 2: First commit
  5. Part 3: Changes and commits
  6. Part 4: Connecting to GitHub
  7. Part 5: Push to GitHub
  8. Complete solution
  9. Key takeaways

1 - Exercise objectives​


By the end of this exercise, you will know how to:

  • ✅ Initialize a Git repository
  • ✅ Create and track files
  • ✅ Make commits with appropriate messages
  • ✅ View the history
  • ✅ Connect your local repository to GitHub
  • ✅ Push your code to GitHub

🔝 Back to table of contents​


2 - Prerequisites​


Make sure you have:

  • Git installed and configured
  • A GitHub account created
  • SSH key configured (or use HTTPS)
  • A terminal open

🔝 Back to table of contents​


3 - Part 1: Creating the project​


Step 1.1: Create the project folder​

mkdir mon-portfolio
cd mon-portfolio

Step 1.2: Initialize Git​

git init

Verification:

ls -la

You should see the .git folder.

Step 1.3: Check the status​

git status

Expected result:

On branch main

No commits yet

nothing to commit (create/copy files and use "git add" to track)

🔝 Back to table of contents​


4 - Part 2: First commit​


Step 2.1: Create the README file​

echo "# Mon Portfolio" > README.md
echo "" >> README.md
echo "Bienvenue sur mon portfolio de développeur." >> README.md

Step 2.2: Check the status​

git status

Expected result:

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        README.md

Step 2.3: Add to staging​

git add README.md

Step 2.4: Check the staging​

git status

Expected result:

Changes to be committed:
  (use "git restore --staged <file>..." to unstage)
        new file:   README.md

Step 2.5: First commit​

git commit -m "feat: initialiser le projet avec README"

Step 2.6: Check the history​

git log --oneline

Expected result:

abc1234 feat: initialiser le projet avec README

🔝 Back to table of contents​


5 - Part 3: Changes and commits​


Step 3.1: Create the HTML page​

Create an index.html file with this content:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Jean Dupont</h1>
        <p>Développeur DevOps</p>
    </header>
    <main>
        <section id="about">
            <h2>À propos</h2>
            <p>Passionné par l'automatisation et le cloud.</p>
        </section>
    </main>
</body>
</html>

Step 3.2: Create the CSS file​

Create a style.css file:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    padding: 3rem;
}

main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

section {
    margin-bottom: 2rem;
}

h2 {
    color: #667eea;
    margin-bottom: 1rem;
}

Step 3.3: Check the untracked files​

git status

Expected result:

Untracked files:
        index.html
        style.css

Step 3.4: Add both files​

git add index.html style.css
# ou
git add .

Step 3.5: Commit the HTML and CSS files​

git commit -m "feat: ajouter la page d'accueil et les styles"

Step 3.6: Modify the README​

Add content to the README:

echo "" >> README.md
echo "## Technologies utilisées" >> README.md
echo "- HTML5" >> README.md
echo "- CSS3" >> README.md
echo "- Git" >> README.md

Step 3.7: Commit the change​

git add README.md
git commit -m "docs: ajouter les technologies au README"

Step 3.8: Check the complete history​

git log --oneline

Expected result:

def5678 docs: ajouter les technologies au README
ghi9012 feat: ajouter la page d'accueil et les styles
abc1234 feat: initialiser le projet avec README

🔝 Back to table of contents​


6 - Part 4: Connecting to GitHub​


Step 4.1: Create a repository on GitHub​

  1. Go to github.com
  2. Click the + at the top right → New repository
  3. Fill in:
    • Repository name: mon-portfolio
    • Description: "My developer portfolio"
    • Visibility: Public (or Private)
    • DO NOT check "Add a README file" (we already have one)
  4. Click Create repository

Step 4.2: Copy the repository URL​

GitHub displays the instructions. Copy the SSH URL:

[email protected]:votre-username/mon-portfolio.git

Step 4.3: Add the remote​

git remote add origin [email protected]:votre-username/mon-portfolio.git

Step 4.4: Verify the remote​

git remote -v

Expected result:

origin  [email protected]:votre-username/mon-portfolio.git (fetch)
origin  [email protected]:votre-username/mon-portfolio.git (push)

🔝 Back to table of contents​


7 - Part 5: Push to GitHub​


Step 5.1: Push to GitHub​

git push -u origin main

💡 The -u option sets up tracking for future push/pull operations.

Expected result:

Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 8 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (9/9), 1.23 KiB | 1.23 MiB/s, done.
Total 9 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), done.
To github.com:votre-username/mon-portfolio.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

Step 5.2: Check on GitHub​

  1. Refresh your repository page on GitHub
  2. You should see:
    • README.md with its content displayed
    • index.html
    • style.css
    • 3 commits in the history

🎉 Congratulations!​

Your code is now on GitHub!

🔝 Back to table of contents​


8 - Complete solution​


Here are all the commands from the exercise summarized:

# Partie 1 : Création
mkdir mon-portfolio
cd mon-portfolio
git init

# Partie 2 : Premier commit
echo "# Mon Portfolio" > README.md
echo "" >> README.md
echo "Bienvenue sur mon portfolio de développeur." >> README.md
git add README.md
git commit -m "feat: initialiser le projet avec README"

# Partie 3 : Développement
# (créer index.html et style.css)
git add .
git commit -m "feat: ajouter la page d'accueil et les styles"

echo "" >> README.md
echo "## Technologies utilisées" >> README.md
echo "- HTML5" >> README.md
echo "- CSS3" >> README.md
echo "- Git" >> README.md
git add README.md
git commit -m "docs: ajouter les technologies au README"

# Partie 4 & 5 : GitHub
git remote add origin [email protected]:votre-username/mon-portfolio.git
git push -u origin main

🔝 Back to table of contents​


9 - Key takeaways​


Standard Git workflow​

1. Modifier des fichiers
2. git status (vérifier)
3. git add (préparer)
4. git commit -m "message" (enregistrer)
5. git push (synchroniser)

Best practices​

PracticeWhy
Frequent commitsGranular history
Clear messagesEasy to understand
One commit = one changeMakes rollback easier
Check before committingAvoids mistakes

Next step​

In the next chapter, we will study practical cases of merge and rebase!

🔝 Back to table of contents​