Let it snow! ❄️
Um ein wenig weihnachtliche Stimmung auf Ihre Webseite zu zaubern, versuchen wir, eine Schneefall-Animation zu erstellen.
Wir haben nun genügend HTML- und CSS-Kenntnisse, um unter Mithilfe von einem generativen Chatbot eine Schneefall-Animation nicht nur blindlings zu kopieren, sondern mehrheitlich auch zu verstehen - selbst wenn ein wesentlicher Teil, nämlich das JavaScript, noch nicht behandelt wurde.
Vorbereitung
- Erstellen Sie einen neuen Ordner Informatik/WINF/let-it-snow auf Ihrem Computer.
- Öffnen Sie die den erstellten Ordner in VS Code.
- Erstellen Sie eine neue Datei namens index.html.
Es ist wichtig, dem Chatbot mitzuteilen, was Sie bereits wissen und wie die Antwort daherkommen soll:
- Was möchten Sie erreichen?
- Welche Technologie möchten Sie verwenden?
- Sie möchten eine Schneefall-Animation mit HTML, CSS und JavaScript erstellen.
- Wie soll die Antwort aussehen?
- Es ist eine Anleitung erwünscht, die Sie Schritt für Schritt durch den Code führt.
- Welche Vorkenntnisse haben Sie?
- Sie haben grundlegende Kenntnisse in HTML und CSS.
- JavaScript ist Ihnen (noch) nicht vertraut.
- Einbinden von externen Ressourcen (Skripts, CSS) kennen Sie nicht und soll vermieden werden.
- Antwort aufmerksam lesen: Achten Sie darauf, dass der Chatbot Ihre Wünsche auch wirklich berücksichtigt. Beispiel-Prompt:
Ich möchte einen schneeflocken effekt zu meiner html seite hinzufügen. Gib mir Schritt für Schritt Hinweise, wie ich das bewerkstellige. Ich habe nur grundlegende Fähigkeiten mit HTML und CSS, Javascript habe ich bisher noch nicht geschrieben. Das Einbinden von externen Ressourcen (Skripts, CSS) kenne ich nicht, also vermeide das.
Umsetzung
Wer schafft die beste Weihnachts-Webseite zu erstellen? Folgende Anforderungen sollten Sie dabei beachten:
- Sie sollten verstehen, welcher Code-Teil für welchen Effekt zuständig ist.
- Füllen Sie die Seite mit Bildern, Texten, Farben, Musik, etc., damit die Seite weihnachtlich wirkt.
- Verwenden Sie den Code aus dem Chatbot-Antwort als Ausgangspunkt.
- Experimentieren Sie mit den Parametern, um den Schneefall-Effekt zu verändern.
- Erweitern Sie den Code nach Belieben - machen Sie allenfalls Versionen, so dass Sie stets auf eine funktionierende Version zurückgreifen können.
Halten Sie hier einen Screenshot Ihrer Webseite fest: