HTML, CSS und JavaScript spielend mit Flappy Bird lernen!

Dein eigenes Spiel zum Selberzocken, Personalisieren, Veröffentlichen, Bewerben oder Verschenken

What you'll learn

Erste Kenntnisse oder Auffrischung der wichtigen Websprachen HTML, CSS und JavaScript
Grundlegende Logik und Styling eines 2D-Browserspiels (Flappy Bird) - eine Vorlage, mit der du im Anschluss weiterarbeiten kannst, wenn du es willst.
Einblicke und Installation wichtiger Tools, Programme und Plattformen (u.a. VSCode, CodePen, CodeCombat)
Tipps aus erster Hand für deinen Einstieg als Programmierer*in
Ein selbst programmiertes Browser-Spiel zum Spielen, Verschenken, Personalisieren, Veröffentlichen und Angeben

Course content
6 sections • 43 lectures • 5h 26m total length

Requirements

Keine Programmierkenntnisse nötig.
Du brauchst nur einen Computer (Windows, MacOS oder Linux) mit Internetverbindung und ein paar Stunden deiner Zeit.
Die Programme und Tools, die wir gemeinsam nutzen werden, sind frei erhältlich.

Description

Hallo!

Hier zeige ich dir, wie du mit ganz wenig Aufwand und vor allem völlig ohne bisherige Vorkenntnisse ein Spiel programmierst, das du vielleicht noch aus deiner Kindheit kennst: Flappy Bird. Hast du dich schonmal gefragt, wie man Animationen erstellt? Wie Gameover funktioniert oder Kollisionslogiken? All das lernst du hier kennen, genau wie die Konzepte dahinter. Statt eines trockenen, reinen Theoriekurses erwartet dich hier von Anfang an jede Menge Interaktivität und ein ganz besonderes Abschlussprojekt, dass dich stolz machen wird.

Das ist aber längst nicht alles. In abwechslungsreichen, kurzen Einheiten aus Theorie und Praxis vermittle ich dir ein Grundverständnis der gefragten Websprachen HTML (HTML5), CSS (CSS3) und JavaScript (ES6) nach neuestem Standard. Ich stelle dir in allen Abschnitten Material zur Verfügung, um dein Wissen zu verfestigen - ob in Form von Quizzen, Übungen, hilfreichen Quellen, Cheatsheets oder Code-Schnipseln zum Ausprobieren. Außerdem verwende ich neben den deutschen Begriffen auch die englischen, was in einer so internationalen Branche wie dieser durchaus wichtig ist.

Das Beste: Du wirst einen Code entwickeln, den du jederzeit frei benutzen kannst - nicht nur, um dein Pong Game selbst zu spielen, es als außergewöhnliches Vorzeigeprojekt bei der Jobsuche vorzuweisen oder zu verschenken. Denn: Hast du einmal die Logik des Pong Games verstanden, kannst du mit deiner hier erstellten Code-Vorlage auch deine eigenen Spiele programmieren. Und vielleicht wirst du sie sogar bald wie ich veröffentlichen!

Wie erwähnt: Du brauchst für diesen Kurs keinerlei Vorkenntnisse. Er macht aber vielleicht auch dann Sinn für dich, wenn du schonmal mit HTML, CSS und JavaScript in Berührung gekommen bist und deine Kenntnisse gerne auffrischen willst. Gib vor deinen Freunden mit deinem eigenen Projekt an oder finde einfach heraus, ob Programmieren was für dich ist. Ob als Karriere-Kick oder Privatvergnügen: Ich tue mein Bestes, um dich deinem Ziel näher zu bringen. Und selbst, wenn du schon kurz vor Beginn einer Programmier-Ausbildung stehst, können ein paar Kenntnisse vorab nicht schaden, wie du sie hier erwirbst. Natürlich begleite ich dich auch durch alle für den Kurs wichtigen Installationen, lasse dich auch mal experimentieren und teile kurz meine persönlichen Erfahrungen als ehemals frischgebackene Programmiererin.

Also: Trau dich und bis gleich im Kurs!

Deine Sinah


Konkrete Lerninhalte:


Aufgabe und Aufbau (Syntax) von HTML, CSS und JavaScript (nach aktuellem Standard)

Wichtige Programme und Plattformen des Frontend: CodePen, Visual Studio Code (inkl. Erweiterungen), CodeCombat

Inhalte gliedern und Seiten strukturieren mit HTML (Überschriften, verschiedene Textpassagen, Fußzeilen, Trennlinien, Umbrüche…)

Text und Bilder in HTML

Textauszeichnung, Barrierefreiheit und technische Kompatibilität in HTML

Farben in CSS

Spezifität in CSS

Variablen, Schlüsselwörter und Datentypen in JavaScript

Operatoren in JavaScript

Datenstrukturen: Objekte und Arrays

Funktionen in JavaScript (Funktionen allg., Methoden, Rekursive Funktionen, Callback-Funktionen, Anonyme und Arrow-Funktionen/Lambda-Ausdrücke/Pfeilfunktionen, Funktionsdeklarationen und -ausdrücke)

If/Else-Anweisungen in JavaScript

Schleifen und Iterationen: For und ForEach

Events in JavaScript (Eventhandler, Evenlistener, Eventtargets)

Das Hallo-Welt-Programm

Das Document Object Model (DOM) und Dom Manipulation

Das Canvas-Element

Spieleentwicklung: Animationen, Abbruch-Bedingung und Gewinnlogik, Musik hinzufügen!

Dein eigenes Browserspiel programmieren!

Tipps aus erster Hand für angehende Programmierer*innen

Who this course is for:

Programmier-Anfänger*innen, die schnell ein eigenes Produkt (Spiel) vorweisen und nebenbei ein erstes Verständnis für HTML, CSS und JavaScript entwickeln wollen
Für die, die privat oder beruflich einen wichtigen Schritt für ihre Zukunft gehen wollen
Für alle, die ihre Kenntnisse auffrischen oder erst herausfinden wollen, ob Programmieren etwas für sie ist
Für die, die gelangweilt von ewig langen, unkreativen Theorie-Kursen sind, aber gleichzeitig viel lernen wollen
Für alle, die den Spaß am Programmieren finden wollen, indem sie gleich mit einem individuellen Projekt starten