Artikel

So programmieren Sie eine einfache Website in weniger als einer Stunde

Eine persönliche Landingpage mit:

2 Min. LesezeitSprache: DE DeutschKostenlos0 Claps0 Kommentare

BusinessMarketing GrowthCodeWeb DevelopmentBusinessMarketing GrowthSimpleWebsite

Leseoptionen

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:

Text ersetzen – Ihr Name, Slogan, Biografie
Farben ändern – Bearbeiten Sie den Farbverlauf in der „Kopfzeile“ und das violette „#667eea“.
Links aktualisieren – Ersetzen Sie „#“ in sozialen Links durch Ihre tatsächlichen URLs
Fügen Sie Ihr Foto hinzu – Fügen Sie „` in der Kopfzeile hinzu
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)

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

2. Netlify (am einfachsten)

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

3. Vercel

Gehen Sie zu vercel.com
Importieren Sie Ihr Projekt
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)

Kommentare

0 Kommentare

Noch keine freigegebenen Kommentare sichtbar. Neue Antworten können moderiert werden.