HTML Abschluss-Projekt: Portfolio-Website

🎉 Herzlichen Glückwunsch! Du hast die HTML-Grundlagen durchgearbeitet. Jetzt ist es Zeit, alles in einem echten Projekt zu kombinieren!

Das Projekt-Ziel

Wir bauen eine persönliche Portfolio-Website mit mehreren Seiten:

Was du baust:

🏠 Home-Seite mit Header, Hero-Section, Features
👤 Über Mich mit Lebenslauf und Skills
💼 Portfolio mit Projektübersicht
📧 Kontakt mit Formular
Responsive für Mobile, Tablet, Desktop
SEO-optimiert mit Meta-Tags

Projekt-Struktur

Erstelle diese Ordnerstruktur:

portfolio/
├── index.html          (Home)
├── about.html          (Über Mich)
├── portfolio.html      (Projekte)
├── contact.html        (Kontakt)
├── images/
│   ├── profile.jpg
│   ├── project1.jpg
│   └── logo.png
└── README.md

Phase 1: Home-Seite (index.html)

1.1 HTML-Grundgerüst

index.html - Grundstruktur

<!DOCTYPE html>
<html lang="de">
<head>
  <!-- Meta-Tags für SEO -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Portfolio von [Dein Name] - Web Developer mit Fokus auf HTML, CSS und JavaScript">
  <meta name="author" content="[Dein Name]">

  <!-- Open Graph für Social Media -->
  <meta property="og:title" content="[Dein Name] - Web Developer Portfolio">
  <meta property="og:description" content="Entdecke meine Projekte und Fähigkeiten als Web Developer">
  <meta property="og:image" content="./images/og-image.jpg">
  <meta property="og:type" content="website">

  <!-- Title -->
  <title>[Dein Name] - Web Developer Portfolio</title>
</head>
<body>
  <!-- Header mit Navigation -->
  <header>
    <nav aria-label="Hauptnavigation">
      <!-- Navigation kommt hier -->
    </nav>
  </header>

  <!-- Hauptinhalt -->
  <main>
    <!-- Hero Section -->
    <!-- Features Section -->
    <!-- Call-to-Action -->
  </main>

  <!-- Footer -->
  <footer>
    <!-- Footer-Inhalt -->
  </footer>
</body>
</html>

1.2 Header & Navigation

Header mit Navigation

<header>
  <nav aria-label="Hauptnavigation">
    <div class="nav-container">
      <!-- Logo -->
      <a href="index.html" class="logo">
        <img src="./images/logo.png" alt="[Dein Name] Logo" width="50" height="50">
        <span>[Dein Name]</span>
      </a>

      <!-- Navigation Links -->
      <ul role="menubar">
        <li role="none">
          <a href="index.html" role="menuitem" aria-current="page">Home</a>
        </li>
        <li role="none">
          <a href="about.html" role="menuitem">Über Mich</a>
        </li>
        <li role="none">
          <a href="portfolio.html" role="menuitem">Portfolio</a>
        </li>
        <li role="none">
          <a href="contact.html" role="menuitem">Kontakt</a>
        </li>
      </ul>
    </div>
  </nav>
</header>

1.3 Hero Section

Hero Section mit Vorstellung

<section class="hero">
  <div class="hero-content">
    <h1>Hallo, ich bin <span class="highlight">[Dein Name]</span></h1>
    <h2>Web Developer & Designer</h2>
    <p>
      Ich entwickle moderne, benutzerfreundliche Websites mit HTML, CSS und JavaScript.
      Von der Idee bis zum fertigen Produkt.
    </p>

    <!-- Call-to-Action Buttons -->
    <div class="hero-buttons">
      <a href="portfolio.html" class="btn btn-primary">
        Meine Projekte ansehen
      </a>
      <a href="contact.html" class="btn btn-secondary">
        Kontakt aufnehmen
      </a>
    </div>
  </div>

  <!-- Optionales Bild -->
  <div class="hero-image">
    <img src="./images/profile.jpg" alt="Porträt von [Dein Name]" width="400" height="400">
  </div>
</section>

1.4 Skills/Services Section

Skills mit Icons

<section class="skills">
  <h2>Was ich kann</h2>
  <p>Meine Fähigkeiten und Technologien</p>

  <div class="skills-grid">
    <!-- Skill 1 -->
    <article class="skill-card">
      <div class="skill-icon">💻</div>
      <h3>HTML & CSS</h3>
      <p>
        Semantisches HTML5 und modernes CSS3 mit Flexbox, Grid und Animationen.
      </p>
    </article>

    <!-- Skill 2 -->
    <article class="skill-card">
      <div class="skill-icon">⚡</div>
      <h3>Responsive Design</h3>
      <p>
        Mobile-First Entwicklung für perfekte Darstellung auf allen Geräten.
      </p>
    </article>

    <!-- Skill 3 -->
    <article class="skill-card">
      <div class="skill-icon">🚀</div>
      <h3>Performance</h3>
      <p>
        Optimierte Websites mit schnellen Ladezeiten und bester User Experience.
      </p>
    </article>

    <!-- Skill 4 -->
    <article class="skill-card">
      <div class="skill-icon">♿</div>
      <h3>Accessibility</h3>
      <p>
        Barrierefreie Websites nach WCAG-Standards für alle Nutzer.
      </p>
    </article>
  </div>
</section>

1.5 Footer

Footer mit Social Links

<footer>
  <div class="footer-content">
    <!-- Schnelllinks -->
    <div class="footer-section">
      <h3>Navigation</h3>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">Über Mich</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html">Kontakt</a></li>
      </ul>
    </div>

    <!-- Social Media -->
    <div class="footer-section">
      <h3>Folge mir</h3>
      <ul class="social-links">
        <li>
          <a href="https://github.com/deinname" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profil">
            <span>GitHub</span>
          </a>
        </li>
        <li>
          <a href="https://linkedin.com/in/deinname" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Profil">
            <span>LinkedIn</span>
          </a>
        </li>
        <li>
          <a href="https://twitter.com/deinname" target="_blank" rel="noopener noreferrer" aria-label="Twitter Profil">
            <span>Twitter</span>
          </a>
        </li>
      </ul>
    </div>

    <!-- Kontakt -->
    <div class="footer-section">
      <h3>Kontakt</h3>
      <address>
        <a href="mailto:deine@email.de">deine@email.de</a><br>
        <a href="tel:+491234567890">+49 123 456 7890</a>
      </address>
    </div>
  </div>

  <!-- Copyright -->
  <div class="footer-bottom">
    <p>&copy; 2025 [Dein Name]. Alle Rechte vorbehalten.</p>
  </div>
</footer>

Phase 2: Über Mich Seite (about.html)

about.html - Vollständige Seite

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Über [Dein Name] - Mein Werdegang, Skills und Leidenschaften als Web Developer">
  <title>Über Mich - [Dein Name]</title>
</head>
<body>
  <!-- Navigation (gleich wie index.html) -->
  <header>
    <!-- ... Header Code von index.html ... -->
  </header>

  <main>
    <!-- Über Mich Hero -->
    <section class="about-hero">
      <h1>Über Mich</h1>
      <p class="lead">Lerne mich und meinen Werdegang kennen</p>
    </section>

    <!-- Persönliche Story -->
    <section class="about-story">
      <div class="about-grid">
        <div class="about-image">
          <img src="./images/profile-large.jpg" alt="[Dein Name] bei der Arbeit" width="600" height="800">
        </div>

        <div class="about-text">
          <h2>Hallo, ich bin [Dein Name]</h2>
          <p>
            Ich bin ein leidenschaftlicher Web Developer aus [Deine Stadt].
            Seit [Jahr] entwickle ich Websites und Webanwendungen mit Fokus
            auf Clean Code, User Experience und Performance.
          </p>
          <p>
            Meine Reise begann mit einem einfachen HTML-Tutorial und hat mich
            zu modernen Frameworks wie React und Angular geführt. Ich liebe es,
            komplexe Probleme zu lösen und intuitive Benutzeroberflächen zu gestalten.
          </p>

          <h3>Was mich auszeichnet:</h3>
          <ul>
            <li>✅ Strukturierter und sauberer Code</li>
            <li>✅ Mobile-First Denkweise</li>
            <li>✅ Barrierefreie Entwicklung</li>
            <li>✅ Performance-Optimierung</li>
            <li>✅ Agile Arbeitsweise</li>
          </ul>
        </div>
      </div>
    </section>

    <!-- Skills & Technologien -->
    <section class="tech-stack">
      <h2>Mein Tech-Stack</h2>

      <div class="tech-categories">
        <!-- Frontend -->
        <article class="tech-category">
          <h3>Frontend</h3>
          <ul>
            <li>
              <strong>HTML5</strong>
              <progress value="90" max="100" aria-label="HTML Kenntnisse 90%"></progress>
              <span>90%</span>
            </li>
            <li>
              <strong>CSS3 / Sass</strong>
              <progress value="85" max="100" aria-label="CSS Kenntnisse 85%"></progress>
              <span>85%</span>
            </li>
            <li>
              <strong>JavaScript</strong>
              <progress value="75" max="100" aria-label="JavaScript Kenntnisse 75%"></progress>
              <span>75%</span>
            </li>
            <li>
              <strong>React</strong>
              <progress value="60" max="100" aria-label="React Kenntnisse 60%"></progress>
              <span>60%</span>
            </li>
          </ul>
        </article>

        <!-- Tools -->
        <article class="tech-category">
          <h3>Tools & Workflow</h3>
          <ul>
            <li>Git & GitHub</li>
            <li>VS Code</li>
            <li>Figma</li>
            <li>npm / yarn</li>
            <li>Webpack</li>
          </ul>
        </article>

        <!-- Soft Skills -->
        <article class="tech-category">
          <h3>Soft Skills</h3>
          <ul>
            <li>Teamarbeit</li>
            <li>Problemlösung</li>
            <li>Kommunikation</li>
            <li>Projektmanagement</li>
            <li>Selbstständiges Lernen</li>
          </ul>
        </article>
      </div>
    </section>

    <!-- Werdegang / Timeline -->
    <section class="timeline">
      <h2>Mein Werdegang</h2>

      <div class="timeline-items">
        <!-- Event 1 -->
        <article class="timeline-item">
          <time datetime="2023">2023</time>
          <h3>Web Developer</h3>
          <p><strong>Firma XYZ</strong></p>
          <p>Entwicklung von Kundenprojekten mit React und Next.js</p>
        </article>

        <!-- Event 2 -->
        <article class="timeline-item">
          <time datetime="2022">2022</time>
          <h3>Frontend Developer</h3>
          <p><strong>Startup ABC</strong></p>
          <p>Aufbau der Frontend-Architektur und UI-Komponenten</p>
        </article>

        <!-- Event 3 -->
        <article class="timeline-item">
          <time datetime="2021">2021</time>
          <h3>Ausbildung Fachinformatiker</h3>
          <p><strong>Berufsschule</strong></p>
          <p>Abschluss mit Auszeichnung</p>
        </article>

        <!-- Event 4 -->
        <article class="timeline-item">
          <time datetime="2020">2020</time>
          <h3>Erste Schritte in der Webentwicklung</h3>
          <p><strong>Selbststudium</strong></p>
          <p>HTML, CSS und JavaScript Grundlagen</p>
        </article>
      </div>
    </section>
  </main>

  <!-- Footer (gleich wie index.html) -->
  <footer>
    <!-- ... Footer Code von index.html ... -->
  </footer>
</body>
</html>

Phase 3: Portfolio Seite (portfolio.html)

portfolio.html - Projektübersicht

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Portfolio von [Dein Name] - Meine besten Web-Projekte und Arbeiten">
  <title>Portfolio - [Dein Name]</title>
</head>
<body>
  <header>
    <!-- ... Header Code ... -->
  </header>

  <main>
    <!-- Portfolio Hero -->
    <section class="portfolio-hero">
      <h1>Meine Projekte</h1>
      <p class="lead">Eine Auswahl meiner besten Arbeiten</p>
    </section>

    <!-- Projekt-Grid -->
    <section class="projects">
      <!-- Projekt 1 -->
      <article class="project-card">
        <picture>
          <source srcset="./images/project1.webp" type="image/webp">
          <img src="./images/project1.jpg" alt="Screenshot von Projekt 1" width="800" height="600" loading="lazy">
        </picture>

        <div class="project-content">
          <h2>E-Commerce Shop</h2>
          <p>
            Vollständiger Online-Shop mit Produktkatalog, Warenkorb und Checkout.
            Responsive Design und optimierte Performance.
          </p>

          <div class="project-tags">
            <span class="tag">HTML</span>
            <span class="tag">CSS</span>
            <span class="tag">JavaScript</span>
            <span class="tag">Responsive</span>
          </div>

          <div class="project-links">
            <a href="https://projekt1-demo.de" target="_blank" rel="noopener noreferrer" class="btn">
              Live Demo 🔗
            </a>
            <a href="https://github.com/deinname/projekt1" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
              Code ansehen
            </a>
          </div>
        </div>
      </article>

      <!-- Projekt 2 -->
      <article class="project-card">
        <picture>
          <source srcset="./images/project2.webp" type="image/webp">
          <img src="./images/project2.jpg" alt="Screenshot von Projekt 2" width="800" height="600" loading="lazy">
        </picture>

        <div class="project-content">
          <h2>Landing Page</h2>
          <p>
            Moderne Landing Page für ein SaaS-Produkt mit Animationen und
            Call-to-Actions. SEO-optimiert und conversion-fokussiert.
          </p>

          <div class="project-tags">
            <span class="tag">HTML5</span>
            <span class="tag">CSS3</span>
            <span class="tag">SEO</span>
          </div>

          <div class="project-links">
            <a href="https://projekt2-demo.de" target="_blank" rel="noopener noreferrer" class="btn">
              Live Demo 🔗
            </a>
            <a href="https://github.com/deinname/projekt2" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
              Code ansehen
            </a>
          </div>
        </div>
      </article>

      <!-- Projekt 3 -->
      <article class="project-card">
        <picture>
          <source srcset="./images/project3.webp" type="image/webp">
          <img src="./images/project3.jpg" alt="Screenshot von Projekt 3" width="800" height="600" loading="lazy">
        </picture>

        <div class="project-content">
          <h2>Portfolio Template</h2>
          <p>
            Wiederverwendbares Portfolio-Template für Kreative und Entwickler.
            Dark Mode, animierte Übergänge und barrierefreie Entwicklung.
          </p>

          <div class="project-tags">
            <span class="tag">HTML</span>
            <span class="tag">CSS Grid</span>
            <span class="tag">Accessibility</span>
            <span class="tag">Dark Mode</span>
          </div>

          <div class="project-links">
            <a href="https://projekt3-demo.de" target="_blank" rel="noopener noreferrer" class="btn">
              Live Demo 🔗
            </a>
            <a href="https://github.com/deinname/projekt3" target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
              Code ansehen
            </a>
          </div>
        </div>
      </article>
    </section>
  </main>

  <footer>
    <!-- ... Footer Code ... -->
  </footer>
</body>
</html>

Phase 4: Kontakt Seite (contact.html)

contact.html - Kontaktformular

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Kontaktiere [Dein Name] - Lass uns über dein nächstes Webprojekt sprechen">
  <title>Kontakt - [Dein Name]</title>
</head>
<body>
  <header>
    <!-- ... Header Code ... -->
  </header>

  <main>
    <!-- Kontakt Hero -->
    <section class="contact-hero">
      <h1>Kontaktiere mich</h1>
      <p class="lead">Hast du ein Projekt im Kopf? Lass uns darüber sprechen!</p>
    </section>

    <!-- Kontakt-Grid -->
    <section class="contact-section">
      <div class="contact-grid">
        <!-- Kontaktformular -->
        <div class="contact-form-wrapper">
          <h2>Schreib mir eine Nachricht</h2>

          <form action="https://formspree.io/f/DEINE-ID" method="POST" class="contact-form">
            <!-- Name -->
            <div class="form-group">
              <label for="name">Name *</label>
              <input
                type="text"
                id="name"
                name="name"
                required
                placeholder="Max Mustermann"
                aria-required="true"
              >
            </div>

            <!-- Email -->
            <div class="form-group">
              <label for="email">E-Mail *</label>
              <input
                type="email"
                id="email"
                name="email"
                required
                placeholder="max@beispiel.de"
                aria-required="true"
              >
            </div>

            <!-- Betreff -->
            <div class="form-group">
              <label for="subject">Betreff *</label>
              <input
                type="text"
                id="subject"
                name="subject"
                required
                placeholder="Projektanfrage"
                aria-required="true"
              >
            </div>

            <!-- Nachricht -->
            <div class="form-group">
              <label for="message">Nachricht *</label>
              <textarea
                id="message"
                name="message"
                rows="6"
                required
                placeholder="Erzähl mir von deinem Projekt..."
                aria-required="true"
              ></textarea>
            </div>

            <!-- Datenschutz -->
            <div class="form-group-checkbox">
              <input
                type="checkbox"
                id="privacy"
                name="privacy"
                required
                aria-required="true"
              >
              <label for="privacy">
                Ich akzeptiere die <a href="#" target="_blank">Datenschutzerklärung</a> *
              </label>
            </div>

            <!-- Submit -->
            <button type="submit" class="btn btn-primary">
              Nachricht senden 📨
            </button>
          </form>
        </div>

        <!-- Kontakt-Informationen -->
        <div class="contact-info">
          <h2>Weitere Kontaktmöglichkeiten</h2>

          <!-- Email -->
          <div class="contact-info-item">
            <h3>📧 E-Mail</h3>
            <a href="mailto:deine@email.de">deine@email.de</a>
          </div>

          <!-- Telefon -->
          <div class="contact-info-item">
            <h3>📞 Telefon</h3>
            <a href="tel:+491234567890">+49 123 456 7890</a>
          </div>

          <!-- Location -->
          <div class="contact-info-item">
            <h3>📍 Standort</h3>
            <address>
              [Deine Stadt], Deutschland<br>
              Verfügbar für Remote-Projekte
            </address>
          </div>

          <!-- Social Media -->
          <div class="contact-info-item">
            <h3>🌐 Social Media</h3>
            <ul class="social-list">
              <li>
                <a href="https://github.com/deinname" target="_blank" rel="noopener noreferrer">
                  GitHub
                </a>
              </li>
              <li>
                <a href="https://linkedin.com/in/deinname" target="_blank" rel="noopener noreferrer">
                  LinkedIn
                </a>
              </li>
              <li>
                <a href="https://twitter.com/deinname" target="_blank" rel="noopener noreferrer">
                  Twitter
                </a>
              </li>
            </ul>
          </div>

          <!-- Verfügbarkeit -->
          <div class="contact-info-item availability">
            <h3>⏰ Verfügbarkeit</h3>
            <p>Ich antworte in der Regel innerhalb von 24 Stunden.</p>
            <p><strong>Status:</strong> <span class="status-badge">Verfügbar für neue Projekte</span></p>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <!-- ... Footer Code ... -->
  </footer>
</body>
</html>

🎯

Einfach

HTML

Live-Vorschau

⚡

Tipps & Tricks

Formspree für Kontaktformular

Statt Backend kannst du Formspree nutzen (kostenlos):

Gehe zu formspree.io
Registriere dich kostenlos
Erstelle neues Form
Kopiere die Form-ID
Setze als action:

<form action="https://formspree.io/f/DEINE-ID" method="POST">

Bilder optimieren

Vor dem Upload:

Resize auf maximale Breite (1920px)
Komprimiere mit TinyPNG.com
Konvertiere zu WebP mit Squoosh.app
Nutze loading="lazy" für Bilder unterhalb des Folds

Navigation-Template wiederverwenden

Erstelle ein Snippet für die Navigation und kopiere es in jede Datei. So musst du Änderungen nur einmal machen (später mit Templates/Includes).

GitHub Pages Deploy

Erstelle GitHub Repository
Push dein Projekt
Gehe zu Settings → Pages
Wähle "main" Branch
Deine Seite ist live unter username.github.io/portfolio!

Netlify für bessere Performance

Netlify bietet:

Automatisches Deployment
HTTPS kostenlos
Formulare ohne Backend
Custom Domain Support

Einfach GitHub Repo verbinden und fertig!

❌

Häufige Fehler

Fehler 1: Navigation nicht auf allen Seiten gleich

❌ FALSCH:

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

<!-- about.html -->
<nav>
  <a href="../index.html">Home</a>  <!-- Anderer Pfad! -->
</nav>

✅ RICHTIG:

<!-- Auf allen Seiten gleiche relative Pfade -->
<nav>
  <a href="index.html">Home</a>
  <a href="about.html">Über Mich</a>
  <a href="portfolio.html">Portfolio</a>
  <a href="contact.html">Kontakt</a>
</nav>

Fehler 2: Bilder-Pfade vergessen

❌ FALSCH:

<!-- Bild existiert nicht oder falscher Pfad -->
<img src="profile.jpg" alt="Profil">

✅ RICHTIG:

<!-- Richtiger relativer Pfad -->
<img src="./images/profile.jpg" alt="Porträt von Max Mustermann">

Fehler 3: Formular ohne Validierung

❌ FALSCH:

<input type="text" name="email">

✅ RICHTIG:

<input
  type="email"
  name="email"
  id="email"
  required
  aria-required="true"
  placeholder="max@beispiel.de"
>

Fehler 4: Vergessene Meta-Tags

❌ FALSCH:

<head>
  <title>Meine Seite</title>
</head>

✅ RICHTIG:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Beschreibung...">
  <title>Konkrete Seite | Dein Name</title>
</head>

🎯

Zusammenfassung

🎉 Du hast es geschafft!

Was du erreicht hast:

✅ Vollständige 4-seitige Website gebaut
✅ Semantic HTML genutzt
✅ Navigation über mehrere Seiten
✅ Kontaktformular erstellt
✅ Portfolio-Projekte präsentiert
✅ SEO-optimierte Meta-Tags
✅ Accessibility berücksichtigt

Was du gelernt hast:

✅ HTML-Struktur für echte Websites
✅ Wiederverwendbare Navigation
✅ Formular-Erstellung und Validierung
✅ Bilder-Optimierung und Lazy Loading
✅ SEO Best Practices
✅ Accessibility Basics

Nächste Schritte:

CSS lernen - Style deine Portfolio-Seite!
JavaScript hinzufügen - Interaktivität einbauen
Responsive machen - Mobile-Optimierung
Online stellen - GitHub Pages oder Netlify
Portfolio erweitern - Echte Projekte hinzufügen

Zeig dein Projekt!

Teile dein fertiges Portfolio:

GitHub Repository erstellen
Online stellen (GitHub Pages/Netlify)
In der Community teilen
Feedback einholen

Du bist jetzt bereit für CSS und JavaScript! 🚀

Bonus: Erweiterungsideen

1. Blog-Sektion

Erstelle blog.html mit Artikel-Liste
Einzelne Blog-Artikel-Seiten
Kategorien und Tags

2. Testimonials

Kundenbewertungen-Sektion
Mit Avatars und Ratings

3. Download-Sektion

Lebenslauf als PDF zum Download
Projekt-Assets teilen

4. FAQ-Seite

Häufige Fragen
Mit <details> und <summary>

5. Timeline erweitern

Zertifikate und Auszeichnungen
Bildungshintergrund detailliert
Side-Projects

Checkliste vor dem Go-Live

[ ] Alle Links funktionieren
[ ] Alle Bilder laden
[ ] Formular getestet
[ ] Responsive auf Mobile gecheckt
[ ] HTML Validator ohne Fehler
[ ] Lighthouse Score > 90
[ ] Alt-Texte bei allen Bildern
[ ] Meta-Tags auf allen Seiten
[ ] 404-Seite vorhanden
[ ] robots.txt und sitemap.xml

Viel Erfolg mit deinem Portfolio! 💪

HTML Abschluss-Projekt: Portfolio-Website

HTML Abschluss-Projekt: Portfolio-Website

Das Projekt-Ziel

Projekt-Struktur

Phase 1: Home-Seite (index.html)

1.1 HTML-Grundgerüst

1.2 Header & Navigation

1.3 Hero Section

1.4 Skills/Services Section

1.5 Footer

Phase 2: Über Mich Seite (about.html)

Phase 3: Portfolio Seite (portfolio.html)

Phase 4: Kontakt Seite (contact.html)

Tipps & Tricks

Formspree für Kontaktformular

Bilder optimieren

Navigation-Template wiederverwenden

GitHub Pages Deploy

Netlify für bessere Performance

Häufige Fehler

Fehler 1: Navigation nicht auf allen Seiten gleich

Fehler 2: Bilder-Pfade vergessen

Fehler 3: Formular ohne Validierung

Fehler 4: Vergessene Meta-Tags

Zusammenfassung

🎉 Du hast es geschafft!

Zeig dein Projekt!

Bonus: Erweiterungsideen

1. Blog-Sektion

2. Testimonials

3. Download-Sektion

4. FAQ-Seite

5. Timeline erweitern

Checkliste vor dem Go-Live

Gut gemacht! 🎉

Artikel bewerten

Das könnte dich auch interessieren

Das <a> Element - Links und Navigation

Das <button> Element - Interaktive Schaltflächen

Das <div> Element - Container für Block-Inhalte