HTML, CSS und JavaScript spielend mit Flappy Bird lernen!

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

4.50 (17 reviews)
Udemy
platform
Deutsch
language
Game Development
category
instructor
48
students
5.5 hours
content
May 2022
last update
$84.99
regular price

What you will 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

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

Screenshots

HTML, CSS und JavaScript spielend mit Flappy Bird lernen! - Screenshot_01HTML, CSS und JavaScript spielend mit Flappy Bird lernen! - Screenshot_02HTML, CSS und JavaScript spielend mit Flappy Bird lernen! - Screenshot_03HTML, CSS und JavaScript spielend mit Flappy Bird lernen! - Screenshot_04

Content

Einführung

Hallo und willkommen!
HTML, CSS und JavaScript im Vergleich
Allgemeines zu HTML, CSS und JavaScript
Kurzer Einblick in die Plattform CodePen & Übung: Code-Schnipsel (Pen) in Aktion
Vertiefe dein Wissen aus dieser Lektion!

HTML im Detail

Intro zum Abschnitt mit Tipps & Tricks
Text strukturieren (Überschriften, Textabschnitte, Fußnoten)
Die HTML-Grundbausteine: Elemente und Tags
Textbetonungen für Screenreader und Barrierefreiheit in HTML
Zusammenfassung HTML
Das HTML-Quiz

CSS im Detail

Regeln (rules): Sektoren (selectors), Eigenschaften (properties), Werte (values)
Farbwerte in CSS angeben
Spezifität und Werte überschreiben in CSS
Das CSS-Quiz

JavaScript im Detail

Variablen: Deklaration und Initialisierung
Schlüsselwörter (keywords)
Variablen und Namenskonventionen
Variablenwerte und Datentypen
Die Operatoren: I. Zuweisungsoperatoren
Die Operatoren. II. Vergleichsoperatoren
Die Operatoren: III. Logische Operatoren
Funktionen allgemein
Methoden (objektgebundene) Funktionen
Events: Event Handler, Event Targets und Event Listener
Objekte
Arrays
Schleifen (loops): for und forEach
Diverse Array-Methoden (map, sort, filter, reduce...)
Besondere Objekte (Window, Document)
Übung: Dein Hello-World-Programm
Das große JavaScript-Quiz

Let's play!

Intro: Das ist so toll an der Spieleentwicklung!
CodeCombat: Spielerisch das Coden lernen
Das Document Object Model (DOM, engl. für Dokumenten-Objekt-Modell)
Installation von Visual Studio Code (kurz: VSCode)
Setup VSCode
Der Aufbau der HTML-Datei
Das Canvas-Element (Teil 1): Formen zeichnen
Das Canvas-Element (Teil 2): Formen zeichnen
Rekursive Funktionen, Callback-Funktionen und If/Else-Anweisungen
Function declaration vs. expression; Anonyme Funktion, Pfeilfunktion
HTML-Code und Bild-Dateien
Bilder auf den Canvas zeichnen und skalieren
Bewegte Bilder: Animationen
Den Vogel lenken mit Event Handlers
Die Kollisionslogik: Vogel vs. Rohre

Tipps & Abschied

Tschüß & Tipps

Reviews

Susanne
June 28, 2022
Der Kurs war super, ab und an passen Ton nicht zum Bild. In Manchen Fällen etwas sprunghaft für Neulinge. Super wäre ein kompletter Download Ordner, den habe ich leider nicht gefunden, würde das Nachlesen und -bearbeiten erleichtern.
Elke
June 20, 2022
schade, dass Stimme und Lippen-Synchronität nicht gegeben ist. das lenkt irgendwie ab, selbst wenn das Sprecherbild nur sehr klein ist. Update: Irgendwann ist einem die Lippen-Synchronität aber egal. Ich fand HTML, CSS super toll aufgebaut, JS kapier ich noch nicht ganz (ist aber auch deutlich komplexer als das davor), aber mal sehen wie es jetzt mit dem Spielprogrammieren läuft. Es nacht auf jeden Fall Spass und macht Stolz, grad wenn man noch nie was mit Programmieren zu tun hatte, so wie ich. Update: in Video 35 gibt es keine Anleitung wie man die Bilder hochlädt. Schade. Es wäre schon gut, wenn auch das Schritt für Schritt erklärt würde.

Charts

Price

HTML, CSS und JavaScript spielend mit Flappy Bird lernen! - Price chart

Rating

HTML, CSS und JavaScript spielend mit Flappy Bird lernen! - Ratings chart

Enrollment distribution

HTML, CSS und JavaScript spielend mit Flappy Bird lernen! - Distribution chart
4618708
udemy ID
3/29/2022
course created date
5/7/2022
course indexed date
Bot
course submited by