HTML & CSS Anfänger 75 min

Projekt: Portfolio-Webseite erstellen

Baue dein persönliches Portfolio mit HTML und CSS: Hero-Bereich, Projekte, Skills, Über-mich-Sektion und Kontaktformular.

Aktualisiert:

Projekt: Portfolio-Webseite

Dein Portfolio ist deine digitale Visitenkarte. In diesem Projekt baust du eine professionelle Portfolio-Webseite, die du wirklich verwenden kannst — fuer Bewerbungen, Freelancing oder einfach um deine Arbeiten zu praesentieren.

Was wir bauen

Das Portfolio besteht aus:

  • Navigation (sticky, mit Smooth Scrolling)
  • Hero-Bereich mit Name und Kurzvorstellung
  • Ueber mich Sektion
  • Skills mit visueller Darstellung
  • Projekte als Card-Grid
  • Kontakt Sektion mit Formular
  • Footer

Schritt 1: HTML-Struktur

<!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 Max Mustermann - Frontend-Entwickler aus Berlin">
    <title>Max Mustermann - Frontend-Entwickler | Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Skip Link fuer Barrierefreiheit -->
    <a href="#main" class="skip-link">Zum Hauptinhalt springen</a>

    <!-- Navigation -->
    <header class="header">
        <nav class="nav container">
            <a href="#" class="nav-logo">Max<span>Dev</span></a>
            <ul class="nav-links">
                <li><a href="#about">Ueber mich</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projekte">Projekte</a></li>
                <li><a href="#kontakt">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <main id="main">
        <!-- Hero -->
        <section class="hero">
            <div class="container">
                <p class="hero-greeting">Hallo, ich bin</p>
                <h1 class="hero-name">Max Mustermann</h1>
                <p class="hero-title">Frontend-Entwickler</p>
                <p class="hero-description">
                    Ich baue moderne, barrierefreie und performante
                    Webseiten mit HTML, CSS und JavaScript.
                </p>
                <div class="hero-actions">
                    <a href="#projekte" class="btn btn-primary">Meine Projekte</a>
                    <a href="#kontakt" class="btn btn-outline">Kontakt aufnehmen</a>
                </div>
                <div class="hero-social">
                    <a href="https://github.com" target="_blank" rel="noopener noreferrer"
                       aria-label="GitHub Profil">GitHub</a>
                    <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer"
                       aria-label="LinkedIn Profil">LinkedIn</a>
                </div>
            </div>
        </section>

        <!-- Ueber mich -->
        <section id="about" class="about">
            <div class="container">
                <h2 class="section-heading">Ueber mich</h2>
                <div class="about-grid">
                    <div class="about-image">
                        <div class="image-placeholder">
                            <!-- Ersetze das durch dein echtes Foto -->
                            <span>Foto</span>
                        </div>
                    </div>
                    <div class="about-text">
                        <p>
                            Hallo! Ich bin Max, ein leidenschaftlicher Frontend-Entwickler
                            aus Berlin. Seit ueber drei Jahren baue ich Webseiten und
                            Web-Applikationen, die nicht nur gut aussehen, sondern auch
                            fuer alle Menschen zugaenglich sind.
                        </p>
                        <p>
                            Meine Reise begann mit einem einfachen HTML-Tutorial und hat
                            mich seitdem nicht mehr losgelassen. Heute arbeite ich mit
                            modernen Technologien und lege besonderen Wert auf
                            Performance, Barrierefreiheit und sauberen Code.
                        </p>
                        <p>
                            Wenn ich nicht code, findest du mich beim Wandern,
                            beim Lesen oder in einem Berliner Cafe.
                        </p>
                        <a href="#kontakt" class="btn btn-primary">Lass uns reden</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- Skills -->
        <section id="skills" class="skills">
            <div class="container">
                <h2 class="section-heading">Meine Skills</h2>
                <div class="skills-grid">
                    <div class="skill-category">
                        <h3>Frontend</h3>
                        <ul class="skill-list">
                            <li>
                                <span class="skill-name">HTML5</span>
                                <div class="skill-bar"><div class="skill-level" style="width: 95%"></div></div>
                            </li>
                            <li>
                                <span class="skill-name">CSS3 / Sass</span>
                                <div class="skill-bar"><div class="skill-level" style="width: 90%"></div></div>
                            </li>
                            <li>
                                <span class="skill-name">JavaScript</span>
                                <div class="skill-bar"><div class="skill-level" style="width: 85%"></div></div>
                            </li>
                            <li>
                                <span class="skill-name">React</span>
                                <div class="skill-bar"><div class="skill-level" style="width: 75%"></div></div>
                            </li>
                        </ul>
                    </div>
                    <div class="skill-category">
                        <h3>Tools & Sonstiges</h3>
                        <ul class="skill-list">
                            <li>
                                <span class="skill-name">Git / GitHub</span>
                                <div class="skill-bar"><div class="skill-level" style="width: 85%"></div></div>
                            </li>
                            <li>
                                <span class="skill-name">VS Code</span>
                                <div class="skill-bar"><div class="skill-level" style="width: 90%"></div></div>
                            </li>
                            <li>
                                <span class="skill-name">Figma</span>
                                <div class="skill-bar"><div class="skill-level" style="width: 70%"></div></div>
                            </li>
                            <li>
                                <span class="skill-name">Responsive Design</span>
                                <div class="skill-bar"><div class="skill-level" style="width: 92%"></div></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

        <!-- Projekte -->
        <section id="projekte" class="projects">
            <div class="container">
                <h2 class="section-heading">Meine Projekte</h2>
                <div class="projects-grid">
                    <article class="project-card">
                        <div class="project-image">
                            <div class="image-placeholder dark">Projekt 1</div>
                        </div>
                        <div class="project-info">
                            <h3>E-Commerce Shop</h3>
                            <p>Ein moderner Online-Shop mit Warenkorb, Filterung und
                            responsivem Design.</p>
                            <div class="project-tags">
                                <span class="tag">HTML</span>
                                <span class="tag">CSS</span>
                                <span class="tag">JavaScript</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="btn btn-small">Live Demo</a>
                                <a href="#" class="btn btn-small btn-ghost">GitHub</a>
                            </div>
                        </div>
                    </article>

                    <article class="project-card">
                        <div class="project-image">
                            <div class="image-placeholder dark">Projekt 2</div>
                        </div>
                        <div class="project-info">
                            <h3>Wetter-App</h3>
                            <p>Eine Wetter-Applikation mit API-Anbindung, Standorterkennung
                            und 7-Tage-Vorhersage.</p>
                            <div class="project-tags">
                                <span class="tag">React</span>
                                <span class="tag">API</span>
                                <span class="tag">CSS</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="btn btn-small">Live Demo</a>
                                <a href="#" class="btn btn-small btn-ghost">GitHub</a>
                            </div>
                        </div>
                    </article>

                    <article class="project-card">
                        <div class="project-image">
                            <div class="image-placeholder dark">Projekt 3</div>
                        </div>
                        <div class="project-info">
                            <h3>Blog-Plattform</h3>
                            <p>Eine vollstaendige Blog-Plattform mit Markdown-Support
                            und Dark Mode.</p>
                            <div class="project-tags">
                                <span class="tag">HTML</span>
                                <span class="tag">CSS Grid</span>
                                <span class="tag">JavaScript</span>
                            </div>
                            <div class="project-links">
                                <a href="#" class="btn btn-small">Live Demo</a>
                                <a href="#" class="btn btn-small btn-ghost">GitHub</a>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </section>

        <!-- Kontakt -->
        <section id="kontakt" class="contact">
            <div class="container">
                <h2 class="section-heading">Kontakt</h2>
                <p class="contact-intro">
                    Interesse an einer Zusammenarbeit? Schreib mir eine Nachricht!
                </p>
                <form class="contact-form" action="#" method="POST">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" name="name" required
                               autocomplete="name" placeholder="Dein Name">
                    </div>
                    <div class="form-group">
                        <label for="email">E-Mail</label>
                        <input type="email" id="email" name="email" required
                               autocomplete="email" placeholder="deine@email.de">
                    </div>
                    <div class="form-group full-width">
                        <label for="nachricht">Nachricht</label>
                        <textarea id="nachricht" name="nachricht" rows="6" required
                                  placeholder="Deine Nachricht..."></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Nachricht senden</button>
                </form>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2026 Max Mustermann. Mit HTML & CSS gebaut.</p>
        </div>
    </footer>
</body>
</html>

Schritt 2: CSS — Komplettes Styling

/* ===== RESET & VARIABLEN ===== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --text: #0f172a;
    --text-light: #64748b;
    --bg: #ffffff;
    --bg-alt: #f1f5f9;
    --border: #e2e8f0;
    --radius: 10px;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1);
    --transition: 0.3s ease;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

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

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* ===== UTILITIES ===== */
.container {
    width: min(90%, 1100px);
    margin: 0 auto;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    z-index: 1000;
    border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { top: 0; }

.section-heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.section-heading::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background: var(--primary);
    margin: 0.75rem auto 0;
    border-radius: 2px;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition);
    border: 2px solid transparent;
}

.btn-primary {
    background: var(--primary);
    color: white;
}
.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.btn-outline:hover { background: var(--primary); color: white; }

.btn-small {
    padding: 0.4rem 1rem;
    font-size: 0.875rem;
    background: var(--primary);
    color: white;
    border-radius: 6px;
}
.btn-small:hover { background: var(--primary-dark); }

.btn-ghost {
    background: transparent;
    color: var(--text-light);
    border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); }

/* ===== NAVIGATION ===== */
.header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    z-index: 100;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.nav-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
}
.nav-logo span { color: var(--primary); }

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

.nav-links a {
    color: var(--text-light);
    font-weight: 500;
    transition: color var(--transition);
}
.nav-links a:hover { color: var(--primary); }

/* ===== HERO ===== */
.hero {
    min-height: 90vh;
    display: grid;
    place-items: center;
    padding: 4rem 0;
    text-align: center;
}

.hero-greeting {
    color: var(--primary);
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.hero-name {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 0.5rem;
}

.hero-title {
    font-size: clamp(1.25rem, 3vw, 2rem);
    color: var(--text-light);
    margin-bottom: 1.5rem;
}

.hero-description {
    max-width: 550px;
    margin: 0 auto 2rem;
    color: var(--text-light);
    font-size: 1.1rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.hero-social {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.hero-social a {
    color: var(--text-light);
    font-weight: 500;
    transition: color var(--transition);
}
.hero-social a:hover { color: var(--primary); }

/* ===== ABOUT ===== */
.about {
    padding: clamp(3rem, 8vw, 6rem) 0;
    background: var(--bg-alt);
}

.about-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    align-items: center;
}

.image-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: var(--border);
    border-radius: var(--radius);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    color: var(--text-light);
}
.image-placeholder.dark {
    background: #1e293b;
    color: #94a3b8;
}

.about-text p {
    color: var(--text-light);
    margin-bottom: 1rem;
}

.about-text .btn { margin-top: 0.5rem; }

/* ===== SKILLS ===== */
.skills {
    padding: clamp(3rem, 8vw, 6rem) 0;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
    gap: 3rem;
}

.skill-category h3 {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
}

.skill-list li {
    margin-bottom: 1.25rem;
}

.skill-name {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.skill-bar {
    height: 8px;
    background: var(--bg-alt);
    border-radius: 4px;
    overflow: hidden;
}

.skill-level {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    border-radius: 4px;
    transition: width 1s ease;
}

/* ===== PROJEKTE ===== */
.projects {
    padding: clamp(3rem, 8vw, 6rem) 0;
    background: var(--bg-alt);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 2rem;
}

.project-card {
    background: var(--bg);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform var(--transition), box-shadow var(--transition);
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.project-image .image-placeholder {
    height: 200px;
    border-radius: 0;
    aspect-ratio: auto;
}

.project-info {
    padding: 1.5rem;
}

.project-info h3 {
    margin-bottom: 0.5rem;
}

.project-info p {
    color: var(--text-light);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tag {
    background: var(--bg-alt);
    color: var(--primary);
    padding: 0.2rem 0.75rem;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 500;
}

.project-links {
    display: flex;
    gap: 0.5rem;
}

/* ===== KONTAKT ===== */
.contact {
    padding: clamp(3rem, 8vw, 6rem) 0;
}

.contact-intro {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 2rem;
    margin-top: -1.5rem;
    font-size: 1.1rem;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.contact-form .btn {
    grid-column: 1 / -1;
    border: none;
    font-family: inherit;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--text);
    color: var(--text-light);
    text-align: center;
    padding: 2rem 0;
    font-size: 0.9rem;
}

/* ===== FOCUS STYLES ===== */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .about-grid { grid-template-columns: 1fr; text-align: center; }
    .about-image { max-width: 250px; margin: 0 auto; }
    .contact-form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

Anpassung an deine Beduerfnisse

Ersetze die Platzhalter durch deine echten Daten:

  1. Name und Titel in der Hero-Sektion
  2. Foto anstelle des Platzhalters im Ueber-mich-Bereich
  3. Skills mit deinen tatsaechlichen Faehigkeiten und Prozentwerten
  4. Projekte mit Screenshots und Links zu deinen echten Arbeiten
  5. Farben in den CSS Custom Properties
  6. Social Links zu deinen Profilen

Erweiterungsideen

  • Hamburger-Menue mit JavaScript fuer Mobile
  • Dark Mode Toggle mit CSS Custom Properties
  • Animationen beim Scrollen (Intersection Observer)
  • Blog-Sektion mit deinen Artikeln
  • Zeugnisse/Testimonials von Kunden oder Kollegen
  • Download-Button fuer deinen Lebenslauf

Was kommt als Naechstes?

Im letzten Projekt baust du ein Blog-Layout — mit Hauptinhalt, Sidebar und responsivem Design.

Zusammenfassung

  • Ein Portfolio braucht: Hero, Ueber mich, Skills, Projekte und Kontakt
  • CSS Grid fuer das Gesamtlayout, Flexbox fuer Komponenten
  • Custom Properties fuer ein konsistentes Farbschema
  • Skill-Bars mit einfachem CSS (Balken mit Breite in Prozent)
  • Project-Cards mit Hover-Effekten und Tags
  • Barrierefreiheit: Skip-Link, Focus-Styles, Aria-Labels
  • Responsive Design: Mobile First mit Grid-Anpassungen

Pro-Tipp: Hoste dein Portfolio kostenlos auf GitHub Pages, Netlify oder Vercel. So hast du eine echte URL, die du in Bewerbungen und auf Social Media teilen kannst. Ein Live-Portfolio beeindruckt Arbeitgeber viel mehr als ein PDF!

Zurück zum HTML & CSS Kurs