Grundlagen in HTML, CSS und JavaScript spielerisch lernen

Hier erkläre ich dir, was HTML, CSS und JS sind, was sie gemein haben und worin sie sich unterscheiden. Was das mit der Körper-Analogie zu tun hat und wie die erste je entwickelte Website aussah, erfährst du hier.

Zum Material:

Du findest die Website auch hier: http://info.cern.ch/hypertext/WWW/TheProject.html

Und schon lernst du das erste wichtige Tool als Programmierer*in kennen: Die kostenlose Open-Source-Plattform "CodePen". Hier erstellst du Code, testet und teilst ihn und die Plattform eignet sich wunderbar für erste ,,Experimente" - also dein allererstes Programm.

Um den Inhalt der vorherigen Lektion weniger abstrakt zu halten, veranschauliche ich ihn dir hier anhand eines vorbereiteten Code-Schnipsels. Durch ihn erlebst du alle 3 Websprachen ,,in Aktion". Klar, der Code ist noch sehr einfach. Aber es ist doch cool, wie du jede noch so kleine Änderung im Code sofort in Echtzeit in der Ausgabe siehst...

Übung: Mit deinem ersten Pen (Code) rumspielen!

Hier findest du meinen mit CodePen erstellten ,,Pen", also Code-Schnipsel: https://codepen.io/Sinah/pen/BawNrPx

Du brauchst keinen Account, um damit herumzuspielen und veränderst nur deine eigene Version. Daher bleibt das Original (mein Pen) stets erhalten. Nimm dir so viel Zeit wie du willst.

Experimentiere mit dem Code, versuche, Dinge zu ändern und hab' keine Angst vorm Crash. Wichtig: Um deine Pens- oder deine Version meiner Pens- zu speichern, brauchst du einen (kostenlosen) CodePen-Account. Auch wenn der Pen automatisch auf "Auto-save" eingestellt ist (siehe Settings --> Behavior--> Save Automatically?), musst du ihn einmal gespeichert haben, damit er von da an alle 30 Sekunden automatisch gespeichert wird. Es kann nicht schaden, ab und an auf ,,Save" zu klicken.

HINWEIS: Da wir uns hier im HTML-Abschnitt befinden, betone ich, wie wichtig die genannten Quellen (MDN Web Docs, SELFHTML-Wiki und w3schools) für HTML-Fragen sind. Du findest dort aber auch Antworten auf deine CSS- und JavaScript-Fragen.

Eine Website wie bei einer Zeitung anhand von Headings (Überschriften), Textabschnitten (Parahraphs/Divs) und Footern (Fußnoten) gliedern.

Zum Material:

Du findest meinen Pen auch hier: https://codepen.io/Sinah/pen/LYzbBYy

Zum Material:

Du findest meinen Pen auch hier: https://codepen.io/Sinah/pen/podzZqL

Manche HTML-Auszeichnungen führen zu dem gleichen optischen Ergebnis, unterscheiden sich aber in ihrer (semantischen) Bedeutung. Diese wird vom Screenreader erfasst, was besonders wichtig für Menschen mit Seh- oder Leseschwächen sein kann, aber auch von Suchmaschinen und Browsern.

Ich zeige dir hier solche ,,speziellen" Tags und Attribute, die zur Barrierefreiheit einer Website oder Anwendung beitragen können, ihre Kompatibilität erhöhen und technischen Problemen vorbeugen, sowie bei der Suchmaschinenoptimierung (engl. SEO für search engine optimization) eine Rolle spielen.

Zum Material:

Du findest meinen Pen auch hier: https://codepen.io/Sinah/pen/GROKBVN

Hier kommt ein kurzer Überblick darüber, was du bisher über HTML gelernt hast.

Zum Material:

Du willst noch (wesentlich) mehr über HTML lernen und innerhalb weniger Stunden deine eigenen Websites erstellen können? Dann findest du hier meinen HTML-Kurs:
https://www.udemy.com/course/html-crashkurs-eigene-website-und-html5-profi-in-wenigen-stunden/?referralCode=4DCEB9D15975C01E7AE0

Die MDN Web Docs findest du hier: https://developer.mozilla.org/de/

Regeln (rules), Sektoren (selectors), Eigenschaften (properties), Werte (values) sind die Grundbausteine in CSS. Sie alle lernen wir hier kennen.

Zum Material:

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/JjrLGgq?editors=1100

Zum Material:

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/rNGvKRR?editors=1100

Und die MDN Web Docs hier: https://developer.mozilla.org/de/

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/YzrNZbz

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/yLzMZVp?editors=0011

• Eine Funktion deklarieren bzw. definieren (das Keyword 'function', die Namenskonvention, der Anweisungsblock)

• Eine Funktion aufrufen (Funktionsaufruf, engl.: function invocation)

• Einer Funktion Parameter übergeben

• Den Wert einer Funktion in der Konsole ausgeben lassen (console.log() )

Zum Material:

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/LYzyzXw?editors=1011

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/LYzyzXw?editors=1011

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/LYzyzXw?editors=1011

Schreibe dein erstes eigenes Mini-Programm, das Hallo-Welt- oder Hello-World-Programm, klassisch oder freestyle, mit oder ohne Event Target und Styles.

Hier geht's zum Pen: https://codepen.io/Sinah/pen/OJxjJgp?editors=1112

Schalte auf CodeCombat immer neue Level frei, indem du selbst Code schreibst und ihn in Aktion siehst: https://codecombat.com/

Und wenn du mal steckenbleibst: Orientiere dich an den zahlreichen Hinweisen. Schon ein fehlendes Semikolon kann zu Fehlermeldungen führen, aber lass dich nicht entmutigen.

Das Coole an CodeCombat: Du musst (noch) nicht coden können- learning by doing.

Du lernst ein weiteres wichtiges Programm für deine Karriere als Programmierer*in kennen, und zwar VSCode (Visual Studio Code). Dabei handelt es sich um einen kostenlosen Quelltext-Editor mit vielen Features und Erweiterungen.

Achtung: Wenn du nur ein Projekt in VSCode hast (so wie bisher wahrscheinlich), öffnet sich dieses vermutlich automatisch, sobald du VSCode öffnest. Hefte VSCode am besten an deine Taskleiste oder den Desktop an, um schneller darauf zugreifen zu können. Für mehr Infos oder bei Problemen guck dir diese Lektion an.

Meinen kompletten HTML-Code findest du in der Lektion ,,Die HTML-Datei (Teil 2)".

Hier findest du den bisherigen HTML-Code (den Head/Kopf) zum Herunterladen. Ich stelle ihn dir in verschiedenen Dateitypen zur Verfügung (als Code-Datei in einem Zip-Ordner, als Bild...), falls du mit einem Typ Probleme haben solltest. Es handelt sich jeweils um den gleichen Code, nur eben in unterschiedlichen Dateiversionen.

Du kannst meine Datei im Zip-Ordner direkt in deinem VSCode-Projekt öffnen und mit deinem Code vergleichen oder meinen Code kopieren.

So geht das:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code.

Zum Vergleich stelle ich dir hier in den Materialien meinen HTML-Code zur Verfügung, mit einigen Kommentaren versehen. So sollte dein Dokument am Ende dieser Lektion aussehen.

________________________________________________________________________________

Wie bereits weiter oben beschrieben: So öffnest du die Dateien in meinem Zip-Ordner:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code.

Ein gutes Gefühl für den zweidimensionalen Raum ist sehr nützlich, um dein Spiel mit verschiedenen Formen zu stylen, aber auch für die Logik des Spiels (etwa Kollisionslogik und Animationslogik). Wir bringen hier verschiedene Formen und Text auf unsere ,,Leinwand", den Canvas.

________________________________

Auf dem Canvas zeichnen/Koordinatensystem (MDN Web Docs): https://developer.mozilla.org/de/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

Rekursive Funktionen (engl.: recursive functions) stellen einen wichtigen Teil in der Spieleentwicklung dar. Wir lernen die Vorteile der JavaScript-Funktion ,,requestAnimationFrame" kennen, wenn es um leistungsstarke Animationen geht. Wir sehen auch, wie die Funktion ,,cancelAnimationFrame" funktioniert.

Außerdem erkläre ich dir das Konzept der Callback-Funktionen, der If/Else-Bedingungen und den Unterschied zwischen Parametern und Argumenten (engl. arguments).

Zum Material:

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/oNGqXaz?editors=0011

Lernziele:

• Funktionsdeklaration (function declaration) vs. Funktionsausdruck (function expression)

• Anonyme Funktionen (anonymous functions)

• Arrow function/Pfeilfunktion/Lambda-Ausdruck

• Einzeilige Pfeilfunktion

• setTimeout

• eine Zeichenkette bilden (aus statischem String,  dynamischer Variable/Argument, Addition-Operator (+) und Leerzeichen)

Zum Material:

Meinen Pen findest du auch hier: https://codepen.io/Sinah/pen/yLzjdpW?editors=0011

Endlich kommen wir zum JS-Code unseres Spiels! Wir widmen uns den DOM-Nodes der beiden Buttons und des Canvas und lernen, wie wir sie mithilfe von Event Listeners ein- beziehungsweise ausblenden. Dank DOM manipulation verändern wir über JavaScript unsere Elemente. Außerdem lernen wir das Window Object kennen.

____________________________________________________________________________________________________

So öffnest du die Dateien in meinem Zip-Ordner:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code. So kannst du meinen Code direkt in deinem VSCode-Projekt mit deinem Code vergleichen.

Wir erstellen unseren Ball und sorgen dafür, dass er sich bewegt. Damit haben wir unsere erste Animation erstellt!

________________________________________________________________________________________

So öffnest du die Dateien in meinem Zip-Ordner:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code. So kannst du meinen Code direkt in deinem VSCode-Projekt mit deinem Code vergleichen.

Wie funktioniert das mit der Kollisionslogik? Das erfährst du hier: Wir sorgen dafür, dass der Ball nicht mehr verschwindet, sondern auf unserem Spielfeld bleibt. Dabei trainieren wir unser räumliches Verständnis für den 2D-Canvas. Außerdem erstellen wir unseren Schläger und lernen, unseren Code sinnvoll zu strukturieren.

____________________________________________________________________________________________________

So öffnest du die Dateien in meinem Zip-Ordner:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code. So kannst du meinen Code direkt in deinem VSCode-Projekt mit deinem Code vergleichen.

Fi-naaaale! In dieser Lektion stellen wir das JavaScript-File und damit unser Spiel fertig! Wir steuern unser Paddle über die Pfeiltasten. Wir lernen das Event Object und seine Eigenschaft ,,code" kennen. Wir machen unsere Paddle-Animation flüssiger und experimentieren mit unterschiedlichen Geschwindigkeiten. Außerdem erstellen wir unseren dynamischen Punktestand.

____________________________________________________________________________________________________

So öffnest du die Dateien in meinem Zip-Ordner:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code. So kannst du meinen Code direkt in deinem VSCode-Projekt mit deinem Code vergleichen.

Special effects sind für Spiele ähnlich wichtig wie die Logik. Wir fügen unserem Pong Game eine Start- und eine Gameover-Musik hinzu. Dazu kommt wieder das Schlüsselwort 'new' ins Spiel, das die Kontruktor-Methode triggert (vgl. Objekte und Klassen in der Lektion über Methoden).

Hier findest du den gesamten Code inklusive des Musik-Teils. Außerdem findest du meine Audio-Dateien.

____________________________________________________________________________________________________

So öffnest du die Dateien in meinem Zip-Ordner:

Lade meinen Zip-Ordner herunter. Sobald der Download abgeschlossen ist, klicke den Ordner mit Rechtsklick an und wähle ,,Alle extrahieren" (oder Ähnliches). (Eventuell musst du dazu in deinem Ordnerverzeichnis erstmal zu deinen Downloads gehen, wo du den Ordner findest.) Daraufhin wird auf deinem PC ein neuer Ordner erstellt, der kein Zip-Ordner ist. Öffne diesen Ordner, klicke mit Rechtsklick auf die gewünschte Datei und wähle entweder ,,Mit Code öffnen" aus oder Öffnen mit → Visual Studio Code. So kannst du meinen Code direkt in deinem VSCode-Projekt mit deinem Code vergleichen.

Alles Gute und weiterhin viel Spaß beim Programmieren!

Hier findest du meine weiteren Kurse:

HTML-Crashkurs: https://www.udemy.com/course/html-crashkurs-eigene-website-und-html5-profi-in-wenigen-stunden/?referralCode=4DCEB9D15975C01E7AE0

HTML- und CSS-Crashkurs: https://www.udemy.com/course/html-css-frontend-website-programmierung-webentwicklung-crashkurs/?referralCode=FA9C30F5130E54B529EA

Flappy Bird (mit HTML und JavaScript) für Fortgeschrittene (idealer Anschluss an diesen Kurs):

https://www.udemy.com/course/programmieren-flappy-bird-game-spiel-js-javascript-html-logik-canvas/?referralCode=5AB3FA43BF1CDFE8F008