So programmieren Sie eine einfache Website in weniger als einer Stunde

Was wir bauen

Eine persönliche Landingpage mit:

• Eine Überschrift und ein Slogan
• Ein Abschnitt „Über mich“.
• Links zu Ihren sozialen Profilen
• Kontaktinformationen
• Ein Kontaktformular (das ohne Backend funktioniert)

---

Schritt 1: Richten Sie Ihr Projekt ein (2 Minuten)

Erstellen Sie einen Ordner namens „my-website“ mit zwei Dateien:

my-website/
├── index.html    (the structure)
└── style.css     (the styling)

Öffnen Sie beide Dateien in einem beliebigen Texteditor (VS Code, Notepad, TextEdit).

---

Schritt 2: HTML schreiben (10 Minuten)

HTML ist die Struktur Ihrer Seite. Stellen Sie es sich wie den Rahmen eines Gebäudes vor.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Name | Personal Website</title>
  <!-- Link to our CSS file -->
  <link rel="stylesheet" href="style.css">
  <!-- Font Awesome for icons -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>

  <!-- Header / Hero Section -->
  <header>
    <h1>Hi, I'm <span class="highlight">Your Name</span></h1>
    <p class="tagline">Web Developer | Designer | Creator</p>
  </header>

  <!-- About Section -->
  <section id="about">
    <h2>About Me</h2>
    <p>
      Write a sentence or two about yourself. What do you do?
      What are you passionate about? Keep it friendly and authentic.
    </p>
  </section>

  <!-- Skills Section -->
  <section id="skills">
    <h2>What I Do</h2>
    <div class="skills-grid">
      <div class="skill-card">
        <i class="fas fa-code"></i>
        <h3>Web Development</h3>
        <p>HTML, CSS, JavaScript, React</p>
      </div>
      <div class="skill-card">
        <i class="fas fa-paint-brush"></i>
        <h3>Design</h3>
        <p>UI/UX, Figma, Adobe XD</p>
      </div>
      <div class="skill-card">
        <i class="fas fa-mobile-alt"></i>
        <h3>Responsive</h3>
        <p>Mobile-first, all devices</p>
      </div>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact">
    <h2>Get In Touch</h2>
    <form id="contact-form">
      <input type="text" placeholder="Your Name" required>
      <input type="email" placeholder="Your Email" required>
      <textarea placeholder="Your Message" rows="5" required></textarea>
      <button type="submit">Send Message</button>
    </form>
    <p class="form-message" id="form-message"></p>
  </section>

  <!-- Footer -->
  <footer>
    <div class="social-links">
      <a href="#"><i class="fab fa-github"></i></a>
      <a href="#"><i class="fab fa-linkedin"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
    </div>
    <p>&copy; 2026 Your Name. Made with <span class="heart">&hearts;</span></p>
  </footer>

  <script>
    // Contact form — no backend needed
    document.getElementById('contact-form').addEventListener('submit', function(e) {
      e.preventDefault();
      const message = document.getElementById('form-message');
      message.textContent = "Thanks! I will get back to you soon.";
      message.style.color = "#4CAF50";
      this.reset();
    });
  </script>
</body>
</html>

---

Schritt 3: Schreiben Sie das CSS (15 Minuten)

CSS sorgt dafür, dass die Seite gut aussieht. Farben, Layout, Abstände.

/* === Reset & Base === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f8f9fa;
}

/* === Header === */
header {
  text-align: center;
  padding: 80px 20px 40px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

header h1 {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.highlight {
  color: #ffd700;
}

.tagline {
  font-size: 1.2em;
  opacity: 0.9;
}

/* === Sections === */
section {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px;
}

h2 {
  font-size: 2em;
  margin-bottom: 30px;
  text-align: center;
  color: #333;
}

/* === Skills Grid === */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

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

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

.skill-card i {
  font-size: 2em;
  color: #667eea;
  margin-bottom: 15px;
}

.skill-card h3 {
  margin-bottom: 10px;
}

/* === Form === */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
  margin: 0 auto;
}

input, textarea, button {
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 5px;
  font-size: 1em;
}

input:focus, textarea:focus {
  border-color: #667eea;
  outline: none;
}

button {
  background: #667eea;
  color: white;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s;
}

button:hover {
  background: #5a67d8;
}

.form-message {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
}

/* === Footer === */
footer {
  text-align: center;
  padding: 40px;
  background: #333;
  color: white;
}

.social-links a {
  color: white;
  font-size: 1.5em;
  margin: 0 10px;
  text-decoration: none;
  transition: color 0.2s;
}

.social-links a:hover {
  color: #667eea;
}

.heart {
  color: #e74c3c;
}

/* === Responsive === */
@media (max-width: 600px) {
  header h1 { font-size: 1.8em; }
  header { padding: 60px 20px 30px; }
  section { padding: 40px 20px; }
}

---

Schritt 4: Im Browser öffnen (1 Sekunde)

Doppelklicken Sie auf „index.html“. Es öffnet sich in Ihrem Browser.

Sie haben jetzt eine funktionierende Website.

---

Schritt 5: Anpassen (10 Minuten)

Ändern Sie diese Dinge, um es zu Ihrem zu machen:

1. Text ersetzen – Ihr Name, Slogan, Biografie
2. Farben ändern – Bearbeiten Sie den Farbverlauf in der „Kopfzeile“ und das violette „#667eea“.
3. Links aktualisieren – Ersetzen Sie „#“ in sozialen Links durch Ihre tatsächlichen URLs
4. Fügen Sie Ihr Foto hinzu – Fügen Sie „` in der Kopfzeile hinzu
5. Bearbeiten Sie das Formular – Um tatsächlich E-Mails zu senden, ersetzen Sie die Formularaktion durch einen Dienst wie Formspree oder Web3Forms

---

Schritt 6: Veröffentlichen (10 Minuten)

Kostenlose Hosting-Optionen:

1. GitHub-Seiten (empfohlen)

1. Erstellen Sie ein GitHub-Konto
2. Erstellen Sie ein Repository mit dem Namen „Benutzername.github.io“.
3. Laden Sie Ihre „index.html“ und „style.css“ hoch
4. Ihre Website ist unter „username.github.io“ online

2. Netlify (am einfachsten)

1. Gehen Sie zu netlify.com
2. Ziehen Sie Ihren Ordner per Drag & Drop
3. Fertig. Ihre Website erhält eine kostenlose URL („random-name.netlify.app“).

3. Vercel

1. Gehen Sie zu vercel.com
2. Importieren Sie Ihr Projekt
3. Automatische Bereitstellung von GitHub

---

Was Sie gelernt haben

In weniger als einer Stunde:

• HTML-Struktur (Überschriften, Absätze, Abschnitte, Formulare)
• CSS-Styling (Farben, Layout, responsives Design)
• Kontaktformular mit JavaScript
• So veröffentlichen Sie kostenlos online

Nächste Schritte

• Weitere Seiten hinzufügen (Über, Portfolio, Blog)
• Lernen Sie JavaScript, um Interaktivität hinzuzufügen (Animationen, dunkler Modus)
• Verwenden Sie ein CSS-Framework (Tailwind, Bootstrap) für schnelleres Styling
• Verbinden Sie ein echtes Kontaktformular-Backend
• Kaufen Sie eine benutzerdefinierte Domain (10–15 $/Jahr)