🚀 Anleitung: Anmeldung zum Programmierkurs

  1. HTML-Gerüst aufbauen
    Erstelle eine neue Datei, z.B. anmeldung.html, und füge das folgende Grundgerüst ein: 
    <!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <title>Anmeldung</title>
</head>
<body>
</body>
</html>
  2. Material Design Lite (MDL) einbinden
    Füge in den <head>-Bereich folgende Zeilen ein, um die Schriftarten, Icons und das Design-Framework zu nutzen: 
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    💡 Hilfe: Material Design Lite Dokumentation
  3. CSS für Splashscreen und Layout hinzufügen
    Ergänze ein <style>-Tag mit folgendem Inhalt: 
    body {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
#splashscreen {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #3f51b5;
  color: #fff;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
  4. Das HTML-Formular einfügen
    Baue das Formular in einem <div class="form-container"> auf: 
    <form>
  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="text" id="name" required>
    <label class="mdl-textfield__label" for="name">Name...</label>
  </div>

  <div class="mdl-textfield mdl-js-textfield">
    <input class="mdl-textfield__input" type="email" id="email" required>
    <label class="mdl-textfield__label" for="email">E-Mail...</label>
  </div>

  <div class="mdl-textfield mdl-js-textfield">
    <textarea class="mdl-textfield__input" rows="4" id="motivation"></textarea>
    <label class="mdl-textfield__label" for="motivation">Warum möchtest du programmieren lernen?</label>
  </div>

  <label for="language">Programmiersprache wählen:</label>
  <select id="language" required>
    <option disabled selected>Bitte auswählen</option>
    <option value="JavaScript">JavaScript</option>
    <option value="Java">Java</option>
    <option value="Python">Python</option>
  </select>

  <label for="date">Wunschdatum:</label>
  <input type="date" id="date" required>

  <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
    <i class="material-icons">send</i> Jetzt anmelden
  </button>
</form>
  5. Splashscreen mit JavaScript steuern
    Ganz am Ende der Datei (vor </body>) einfügen: 
    <script>
setTimeout(function() {
  document.getElementById('splashscreen').style.display = 'none';
  document.querySelector('.form-container').style.display = 'block';
}, 5000);
</script>
  6. Finale Struktur überprüfen
    Du solltest zwei Container sehen:
    • einen Splashscreen (blau mit Icon „code“)
    • und das Formular, das nach 5 Sekunden eingeblendet wird
    ✅ Code validieren (W3C Validator)
💡 Hinweis: Dieses Projekt kann als Einstieg in die Webentwicklung mit HTML, CSS, JS und Material Design dienen. Ideal für Projektarbeit oder Coding-Kurse!