Projekt: Team-Workflow

Jetzt wird alles zusammengefuehrt! In diesem Praxisprojekt baust du einen kompletten Team-Workflow auf, wie er in echten Softwareprojekten verwendet wird. Du wirst eine Webseite entwickeln und dabei alle Git-Techniken einsetzen, die du gelernt hast.

Projektueberblick

Wir bauen eine Team-Portfolio-Webseite mit folgendem Workflow:

Repository auf GitHub erstellen
Branch-Strategie festlegen
Features in eigenen Branches entwickeln
Pull Requests erstellen und reviewen
Merge-Konflikte loesen
Das Projekt deployen

Schritt 1: Projekt aufsetzen

Repository erstellen

# Lokales Projekt erstellen
mkdir team-portfolio
cd team-portfolio
git init

# .gitignore erstellen
cat > .gitignore << 'EOF'
# System
.DS_Store
Thumbs.db

# Editor
.vscode/
.idea/

# Build
dist/
build/

# Umgebung
.env
.env.local

# Logs
*.log
EOF

# Grundstruktur erstellen
mkdir -p css js images

Basis-Dateien erstellen

Erstelle index.html:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team Portfolio</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header id="header">
        <h1>Unser Team</h1>
    </header>
    <main id="content">
        <section id="team">
            <h2>Teammitglieder</h2>
            <p>Hier stellen wir uns vor.</p>
        </section>
    </main>
    <footer id="footer">
        <p>2026 Team Portfolio</p>
    </footer>
    <script src="js/main.js"></script>
</body>
</html>

Erstelle css/style.css:

:root {
    --primary: #2c3e50;
    --secondary: #3498db;
    --text: #333;
    --bg: #f5f5f5;
}

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

body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
}

header {
    background: var(--primary);
    color: white;
    padding: 2rem;
    text-align: center;
}

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

footer {
    background: var(--primary);
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 3rem;
}

Erstelle js/main.js:

// Team Portfolio - Hauptskript
console.log('Team Portfolio geladen');

Ersten Commit erstellen

git add .
git commit -m "feat: Initiale Projektstruktur mit HTML, CSS und JS"

Auf GitHub pushen

# Repository auf GitHub erstellen (ueber die Weboberflaeche)
# Dann:
git remote add origin https://github.com/DEIN-NAME/team-portfolio.git
git push -u origin main

Schritt 2: Branch-Strategie definieren

Fuer dieses Projekt nutzen wir den GitHub Flow:

main ─── immer deploybar
  |
  ├── feature/navigation     (Navigationsmenu)
  ├── feature/team-cards      (Teammitglieder-Karten)
  ├── feature/kontakt         (Kontaktformular)
  └── fix/responsive          (Responsive Bugfixes)

Regeln

Regel	Beschreibung
`main` ist heilig	Nur ueber Pull Requests aendern
Feature-Branches	Jedes Feature bekommt einen Branch
Namenskonvention	`feature/`, `fix/`, `docs/` als Praefix
Kurze Branches	Maximal 1-2 Tage, dann mergen
Pull Requests	Jede Aenderung wird reviewt

Branch erstellen

git switch -c feature/navigation

Aendere den <header> in index.html:

    <header id="header">
        <nav class="navbar">
            <div class="logo">
                <h1>Team Portfolio</h1>
            </div>
            <ul class="nav-links">
                <li><a href="#team">Team</a></li>
                <li><a href="#projekte">Projekte</a></li>
                <li><a href="#kontakt">Kontakt</a></li>
            </ul>
            <button class="mobile-menu-btn" aria-label="Menu">
                ☰
            </button>
        </nav>
    </header>

Fuege CSS hinzu in css/style.css:

/* Navigation */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 0.8;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
    }
    .mobile-menu-btn {
        display: block;
    }
}

Commits erstellen

git add index.html
git commit -m "feat: Navigationsstruktur in HTML hinzugefuegt"

git add css/style.css
git commit -m "style: Responsives Navigation-Styling implementiert"

Branch pushen

git push -u origin feature/navigation

Pull Request erstellen

Gehe auf GitHub und erstelle einen PR:

Title: feat: Responsive Navigation hinzufuegen

## Beschreibung
Responsives Navigationsmenu mit:
- Desktop: Horizontale Linkliste
- Mobil: Hamburger-Button

## Screenshots
(Screenshots hier einfuegen)

## Checkliste
- [x] Desktop getestet
- [x] Mobil getestet
- [x] Code sauber und kommentiert

Schritt 4: Parallel arbeiten - Team-Cards

Waehrend der Navigation-PR reviewt wird, arbeitest du am naechsten Feature:

# Zurueck zu main (oder direkt vom aktuellen Stand)
git switch main
git pull

# Neuen Feature-Branch
git switch -c feature/team-cards

Team-Karten erstellen

Fuege in index.html den Team-Bereich hinzu:

        <section id="team">
            <h2>Unser Team</h2>
            <div class="team-grid">
                <div class="team-card">
                    <div class="team-card-avatar">AM</div>
                    <h3>Anna Mueller</h3>
                    <p class="role">Frontend Entwicklerin</p>
                    <p>Spezialisiert auf React und CSS-Animationen.</p>
                </div>
                <div class="team-card">
                    <div class="team-card-avatar">BS</div>
                    <h3>Ben Schmidt</h3>
                    <p class="role">Backend Entwickler</p>
                    <p>Node.js und Datenbankdesign.</p>
                </div>
                <div class="team-card">
                    <div class="team-card-avatar">CF</div>
                    <h3>Clara Fischer</h3>
                    <p class="role">UX Designerin</p>
                    <p>Nutzerforschung und Prototyping.</p>
                </div>
            </div>
        </section>

Fuege CSS hinzu:

/* Team Cards */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.team-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.team-card:hover {
    transform: translateY(-5px);
}

.team-card-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--secondary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.role {
    color: var(--secondary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

Committen und pushen

git add index.html
git commit -m "feat: Team-Karten mit Avataren und Beschreibungen"

git add css/style.css
git commit -m "style: Grid-Layout und Hover-Effekte fuer Team-Karten"

git push -u origin feature/team-cards

Schritt 5: Merge-Konflikte loesen

Wenn du beide PRs mergst, kann es zu Konflikten in index.html und style.css kommen. So loest du sie:

# Navigation-PR zuerst mergen (auf GitHub)

# Dann main aktualisieren
git switch main
git pull

# Team-Cards Branch aktualisieren
git switch feature/team-cards
git merge main

Falls Konflikte auftreten:

# Konflikte anzeigen
git status

# Konflikte in der Datei loesen
# ... Editor oeffnen, Marker entfernen ...

# Geloeste Dateien stagen
git add index.html css/style.css

# Merge-Commit erstellen
git commit -m "Merge: main-Aenderungen in Team-Cards integriert"

# Pushen
git push

Schritt 6: Weiteres Feature - Kontaktformular

git switch main
git pull
git switch -c feature/kontakt

Fuege eine Kontakt-Sektion hinzu, committe und erstelle einen PR:

git add .
git commit -m "feat: Kontaktformular mit Validierung"
git push -u origin feature/kontakt

Schritt 7: Projekt-Checkliste

Vor dem Merge

# Alle Branches anzeigen
git branch -a

# Offene PRs auf GitHub pruefen

# Lokalen Stand aktualisieren
git switch main
git pull

Nach dem Merge

# Gemergte Branches aufraeumen
git branch --merged main | grep -v "main" | xargs git branch -d

# Remote-Branches aufraemen
git fetch --prune

Schritt 8: Release erstellen

Wenn alle Features gemergt sind:

git switch main
git pull

# Tag erstellen
git tag -a v1.0 -m "Version 1.0: Team-Portfolio mit Navigation, Team-Cards und Kontakt"

# Tag pushen
git push origin v1.0

GitHub Release

Gehe auf GitHub → Releases → Create a new release
Waehle den Tag v1.0
Schreibe Release Notes:

# Version 1.0

## Neue Features
- Responsive Navigation
- Team-Mitglieder-Karten mit Hover-Effekten
- Kontaktformular mit Client-Validierung

## Technologien
- HTML5, CSS3, JavaScript
- CSS Grid und Flexbox
- Mobile-First Design

Workflow-Zusammenfassung

Hier ist der komplette Workflow auf einen Blick:

# 1. Feature starten
git switch main
git pull
git switch -c feature/mein-feature

# 2. Entwickeln
# ... Code schreiben ...
git add .
git commit -m "feat: Beschreibung"

# 3. Pushen und PR erstellen
git push -u origin feature/mein-feature
# → PR auf GitHub erstellen

# 4. Review einarbeiten
# ... Feedback umsetzen ...
git add .
git commit -m "fix: Review-Feedback eingearbeitet"
git push

# 5. Nach dem Merge aufraeumen
git switch main
git pull
git branch -d feature/mein-feature

Uebungen

Setze den kompletten Workflow fuer ein eigenes Projekt um
Erstelle mindestens 3 Feature-Branches und merge sie ueber Pull Requests
Erzeuge absichtlich einen Merge-Konflikt und loese ihn
Erstelle einen Release mit Tag und Release Notes
Lade einen Freund ein, an deinem Projekt mitzuarbeiten

Was kommt als Naechstes?

Im naechsten und letzten Kapitel erstellst du ein professionelles GitHub-Portfolio, das deine Faehigkeiten zeigt und als Online-Lebenslauf dient.

Zusammenfassung

Ein guter Team-Workflow basiert auf Feature-Branches und Pull Requests
Branch-Konventionen (feature/, fix/, docs/) halten das Projekt uebersichtlich
Parallel arbeiten ist moeglich, wenn jeder in seinem Branch arbeitet
Merge-Konflikte sind normal und gehoeren zum Alltag
Code Reviews verbessern die Qualitaet und foerdern das Lernen
Tags und Releases markieren wichtige Versionen
Regelmaessiges Aufraeumen haelt das Repository sauber

Pro-Tipp: Der beste Weg, diesen Workflow zu lernen, ist ihn regelmaessig anzuwenden - auch bei persoenlichen Projekten! Erstelle Feature-Branches und Pull Requests, selbst wenn du alleine arbeitest. So wird der Workflow zur Gewohnheit und du bist bereit, wenn du in einem Team arbeitest.