Grundlagen in HTML, CSS und JavaScript spielerisch lernen

Und dein Browser-Game programmieren- mit HTML5, CSS3 und JavaScript (ES6)!

4.05 (63 reviews)
Udemy
platform
Deutsch
language
Programming Languages
category
instructor
269
students
5.5 hours
content
Mar 2022
last update
$24.99
regular price

What you will learn

Erste Einblicke oder Auffrischung der wichtigen Websprachen HTML, CSS und JavaScript

Grundlegende Logik und Styling eines 2D-Browserspiels (Pong Game) - damit du damit 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 (Pong Game), das du auch nach dem Kurs frei verwenden kannst!

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: Das Pong Game. Hast du dich schonmal gefragt, wie man Animationen erstellt? Wie Gameover funktioniert oder man dem Spiel Musik hinzufügt? All das lernst du hier kennen, genau wie die Konzepte dahinter.

Das ist aber längst nicht alles. In abwechslungsreichen, kurzen Einheiten aus Theorie und Praxis vermittle ich dir ein Grundverständnis der drei gefragten Websprachen HTML (HTML5), CSS (CSS3) und JavaScript (ES6). 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. 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

  • 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

  • Events in JavaScript

  • 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

Content

Einführung

Hallo und willkommen!
Der Aufbau des Kurses im Detail
Über deine Dozentin (mich!)

Allgemeines zu HTML, CSS und JavaScript

Gemeinsamkeiten und Unterschiede der 3 Sprachen und die Körper-Analogie
Allgemeines zu HTML, CSS und JavaScript
Kurzer Einblick in die Plattform CodePen & Übung: Code-Schnipsel (Pen) in Aktion
Vertiefe dein Wissen aus der vorherigen 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
Ü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 Pong Game: So wird unser Spiel aussehen!
Das Document Object Model (DOM, engl. für Dokumenten-Objekt-Modell)
Installation von Visual Studio Code (kurz: VSCode)
Automatisches Speichern (Auto Save) in VSCode
Dein Projekt in VSCode strukturieren
Hinweis zum (manuellen) Öffnen deines Projekts
Das HTML-File (Teil1): Das Head-Element
Life Server (Erweiterung/Extension) hinzufügen
Das HTML-File (Teil 2): Das Body-Element
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
Das JavaScript-File (Teil 1)
Das JavaScript-File (Teil 2)
Das JavaScript-File (Teil 3)
Finale: Das JavaScript-File (Teil 4)
BONUS: Musik und andere special effects

Tipps & Erfahrungswerte für dich als angehende*r Programmierer*in

Was du als angehender*r Programmierer*in gebrauchen kannst

Screenshots

Grundlagen in HTML, CSS und JavaScript spielerisch lernen - Screenshot_01Grundlagen in HTML, CSS und JavaScript spielerisch lernen - Screenshot_02Grundlagen in HTML, CSS und JavaScript spielerisch lernen - Screenshot_03Grundlagen in HTML, CSS und JavaScript spielerisch lernen - Screenshot_04

Reviews

Thomas
September 21, 2023
Alles super erklärt, sodass man auch sehr gut mitarbeiten und auch alles verstehen kann! Einfach klasse. Richtig super finde ich auch die Überprüfung des Wissens im Anschluss, da macht das lernen doppelt Spass. Auch hier wird dann sehr schön das Wissen vermittelt, bzw. vertieft.
Maike
December 1, 2022
Inhaltlich sehr gut aufbereitet, ich habe nach zwei Videos aber abgebrochen, weil die Ton-Qualität sehr schlecht ist. Es gibt eine Dopplung von Tönen oder auch regelmäßig Tonaussetzer. Schade :-(
Michael
June 12, 2022
Sehr guter Kurs der sich nicht nur auf das simple "Nachmachen" beschränkt. Die Methode "Versuch und Irrtum" führt auf lange Sicht zu mehr Erfolg. Ich würde das als perfekten Einstieg empfehlen. Weniger gut, also sehr diplomatisch ausgedrückt, ist das Audio "Erlebnis". Wir haben das Jahr 2022, da hätte ich schon so etwas wie das hier nicht mehr erwartet.
Markus
March 29, 2022
Die Dozentin ist super! Ich habe zum ersten Mal in meinem Leben ein Computerspiel mit grafischer Benutzeroberfläche entwickelt und es hat riesig Spaß gemacht. Ich wünsche mir eine Fortsetzung!
Treffer
February 28, 2022
Im Gegensatz zu den anderen Bewertungen hier bekommt der Kurs von Frau S. (ich kenne nur den Anfangsbuchstaben des Nachnamens) eine schlechte Bewertung von mir. Das liegt daran, das bei mir zu viele Fragen offen geblieben sind, es viele Dinge gibt die Frau S. besser machen könnte und Frau S. manchmal einen unsicheren Eindruck macht. Außerdem verkompliziert Frau S. manche Sachen und stiftet bei mir noch mehr Verwirrung. Wenn ich etwas lerne, dann möchte ich auch VERSTEHEN, WARUM wird etwas genau SO angewendet und NICHT anders. Frau S. bemüht sich zwar die Zusammenhänge zu erklären aber zu oft konnte ich ihren Ausführungen nicht folgen Da ich mich nicht länger als noch unbedingt notwendig mit dem Kurs von Frau S. aufhalten will, werde ich hier nur ein paar Punkte aufführen. Es fängt schon bei der Erklärung von „Modulo“ an. Frau S. erklärt zwar wie man Modulo berechnet, aber wofür man „Modulo“ braucht, sagt sie nicht. Dabei wäre das an einem Beispiel erledigt. Feststellung ob eine Zahl gerade oder ungerade ist. Auch die Erklärungen der Operatoren waren meiner Ansicht nach zu kompliziert. Nur aus dem Grund, weil ich vorher schon PHP erlernt habe und JS und PHP sich in dem Bereich ähneln, wusste ich worauf Frau S. hinaus will. Außerdem zieht Frau S. sehr abstrakte Beispiele heran. Hier mal der && Operator: Frau S. überprüft hier ob das Ergebnis von zwei Gleichungen korrekt. Ein typisches Beispiel aus der Praxis wäre für die Teilnehmer bestimmt sinnvoller. Der Zugang zu einer Webseite. Stimmt der Benutzername UND das Passwort bekommt man zu Zutritt zu der Seite. In den Videos 15 – 18 sieht man, wie Frau S. Anweisungen mit einem Semikolon abschließt und so kenne ich das auch von PHP. Danach lässt Frau S. diese Semikolon weg. Hier frage ich mich nach welcher Regel Semikolon angewandt werden, aber leider verrät Frau S. das den Teilnehmern nicht. Des weiteren hat Frau S. eine Vorliebe für Anglizismen. Nicht nur das sie teilweise ihre Kommentare auf Englisch schreibt (Video 19), sie macht es dadurch den Teilnehmern auch noch schwerer als nötig. Spätestens bei den Funktionen und Konstanten wird das deutlich. Eine Funktion z. B. besteht aus einer grundsätzlichen Syntax, der ein frei wählbarer Name gegeben wird. Auch hier folgt Frau S. konsequent ihrem Hang zu Anglizismen und setzt englische Begriffe ein. Könnte Frau S. über ihren Schatten springen und deutsche Bezeichnungen einsetzen, würden die Teilnehmer sofort an der Bezeichnung sehen, was zumindest der Name ist. Bei mir hat zum Beispiel das Einbinden eines Bildes auf der Leinwand nicht funktioniert. Nun weiß ich nicht ob das Wort „img“ in den Klammern frei wählbar ist oder ob das für das HTML – Element steht. Ausprobieren geht nicht, weil ja das Einbinden bei mir nicht funktioniert. Beim Zeichnen des Kreises auf der Leinwand erklärt Frau S. unter anderem das dazu PI durch 180 dividiert werden muss und danach mit 360 multipliziert wird, um auf die Zahl 2 zu kommen. Seltsamerweise zeigen dabei alle meine Taschenrechner 6,2 an. Aber vermutlich müssen die Taschenrechner nur einmal richtig geölt werden. Und da ich hier schon mal beim Zeichnen bin: Frau S. könnte es den Teilnehmern auch dadurch leichter machen in dem sie die Abkürzungen in Javascript erklärt. Dann wäre der Einsatz bedeutend leichter. Zum Beispiel steht rect für rectangle = Rechteck. Aber wofür steht arc? Außerdem funktioniert die Verlinkung zu „Code Pen“ in Firefox nicht und das habe ich an zwei verschiedenen Rechnern ausprobiert. Wenn man schon so einen Kurs erstellt ist es doch das Mindeste, dass die Funktionalität überprüft wird. Als es dann mit dem Programmieren des Spiels losging konnte ich schon bald der Logik von Frau S. nicht mehr folgen. In der Hoffnung, dass im Laufe des Fortschritts des Spieles doch noch die große Erleuchtung einsetzt, habe ich alles mit getippt, ohne so ganz genau zu wissen, was ich da eigentlich mache. Doch das gegenteil war der Fall. Anstatt das Programm linear zu schreiben, springt Frau S. zwischen den Code – Zeilen hin und her, was es mir deutlich schwerer machte ihr zu folgen. Inzwischen bin ich beim Video 42 angelangt und wollte heute die Arbeit wider aufnehmen. Aber auf meiner Webseite wurden auf einmal nur noch der Startknopf und der Neustartknopf angezeigt. Die Leinwand und der eingezeichnete Ball sind verschwunden obwohl der entsprechende Code im HTML– und Javascriptdokument steht (Selbstverständlich habe ich den Spielstartknopf gedrückt. Ich mag zwar dumm sein, aber so dumm nun auch wider nicht). Nach 45 Minuten „Fröhlicher Ratespaß mit Javascript“ und erfolglosem Suchen, beschloss ich den korrekten Programm Code von Frau S. Zeile für Zeile in mein Dokument kopieren, um den Fehler zu finden. Aber anstatt den Programm Code als Textdatei zur Verfügung zu stellen, wie das üblich ist, kam Frau S. auf die glorreiche Idee den Code als Bild einzustellen. An dem Punkt hatte ich dann die Nase gestrichen voll und habe den Kurs heute abgebrochen. Und das war nur ein kleiner Ausschnitt von den „Pleiten, Pech und Pannen“ die ich hier erlebt habe. Ich möchte an dieser Stelle aber noch festhalten, das Frau S. redlich bemüht war den Stoff zu erklären und andere Teilnehmer vielleicht sagen, dass die Lehrmethode von Frau S. nobelpreisverdächtig ist. Mögen sich zukünftige Teilnehmer des Kurses selbst ihr Urteil bilden. Auf jeden Fall haben Frau S. und ich nicht den selben Nenner. Mein Fazit: Nach diesem Kurs habe ich keine Lust mehr JS zu lernen und Javascript kann mir mal da begegnen wo die Sonne nicht scheint. Und falls außer mir noch jemand den Kurs abgebrochen hat, habe ich hier eine Lösung des Problems: tinyurl.com/yf6rb6hf **Nachtrag - nachdem Frau S. auf meine Bewertung geantwortet hat ** Frau S. teilt mit, dass sie die Verbesserungsvorschläge umgesetzt hat. Ob es tatsächlich zu einer gravierenden Verbesserung kam, kann ich nicht beurteilen. Ich habe den Kurs von Frau S. abgebrochen und werde ihn auch nicht wider aufnehmen. Interessant fand ich auch die Ausführung von Frau S. zu den englischen Begriffen. Frau S. schreibt hier: „Selbst als deutsche Muttersprachlerin habe ich während meiner Ausbildung lediglich die englischen Begriffe gelernt, wie es üblich ist. Die deutschen Begriffe kenne ich meistens nicht und sehr oft sind sie keine einfachen Übersetzungen der englischen Begriffe, sondern weichen stark von ihnen ab- wenn es sie überhaupt gibt. “. Also über so eine Ausbildung kann ich mich nur noch wundern. Ich habe vor 3 Jahren HTML und CSS erlernt, und vor 2 Jahren PHP (Leider findet an dem Ort aber keine Ausbildung mehr statt). Von jedem Begriff wurde uns die englische UND deutsche Bedeutung erklärt. Egal ob es sich um das HTML – Element „abbr“ = Abbreviation (Abkürzung), die Größenangaben „em“ = equal M (gleich dem großen Buchstaben M) und „rem“ = root em (bezieht sich auf das Wurzelelement) oder die PHP Funktion „strlen“ = String lenght (Länge einer Zeichenkette) handelte. Gerade wenn man wie Frau S. ausbilden möchte und das Ganze für die meisten Teilnehmer wahrscheinlich Neuland ist, bin ich der Meinung das man schon wissen sollte was die Begriffe bedeuten, auch auf Deutsch. Mit der Vorliebe von Frau S. für Anglizismen meinte ich, das Frau S. englische Begriffe einsetzt wo es völlig unnötig ist und es das Lernen eher erschwert. Nämlich bei der Vergabe von frei wählbaren Namen. Dazu habe ich mal eine Funktion mit deutschen Namen geschrieben, die die Mehrwertsteuer berechnet. Das ist zwar PHP, aber ähnelt JS. function Mehrwertsteuer() { $Nettopreis = 12; $Ergebnis = $Nettopreis * 0.19; return $Ergebnis; } echo Mehrwertsteuer(); Frau S. würde diese Funktion wahrscheinlich anders schreiben. Eventuell so: function vat() { $netprice = 12; $vat = $netprice * 0.19; return $vat; } echo vat(); Wie oben beschrieben, beginnen vermutlich die meisten Teilnehmer mit einer Programmiersprache. Und zum Lernen finde ich es deutlich einfacher, dort deutsche Begriffe zu benutzen wo es geht. Denn allein schon an den deutschen Bezeichnungen können die Teilnehmer erkennen, das diese Begriffe nicht zur grundsätzlichen Syntax der Funktion gehören, sondern Namen sind. Was bei englischen Begriffen nicht so schnell geht. Frau S. kann nicht das Video finden wo sie englische Kommentare setzt. Die kann man z. B. in dem Video 19 in den Programmzeilen 55, 60, 65 usw. sehen Weiterhin schreibt Frau S.: „...dass ein 5-stündiger Kurs zu einem so komplexen Thema nur einen ganz kleinen Einblick liefern kann.... Ich biete meine Kurse (meistens) zu extrem niedrigen Preisen an... Das bedeutet aber leider auch, dass es bis auf Weiteres bei solchen Einblicken bleibt.“ Und mit dieser Methode soll man dann JS verstehen? Mit kleinen Einblicken? Falls Sie das lesen sollten Frau S., Sie brauchen mir nicht „Modulo“ zu erklären. Als ich PHP gelernt habe, wurde das Thema bei der Abhandlung über die Operatoren intensiv behandelt. Würde ich „Modulo“ nicht kennen, hätte ich z. B. nicht gewusst, dass man damit gerade und ungerade Zahlen ermitteln kann. Mit freundlichen Grüßen TiK
Gerald
February 13, 2022
Für mich als Neueinsteiger ideal. Ich habe viel gelernt. Der Kurs ist sehr gut aufgebaut und kompetent und sympathisch vorgetragen. Weiter so...ich freue mich auf die nächsten Kurse.
Leila
February 5, 2022
Der Kurs hat sehr viel Spaß gemacht! Alles wurde gut erklärt und ist sehr verständlich, auch wenn man sich zuvor nicht mit dem Programmieren beschäftigt hat. Alles war anschaulich gestaltet und auch das Design des Kurses hat mir durchgehend gut gefallen. Ich bin total motiviert und werde auf jeden Fall Sinahs nächste Kurse besuchen :)
Marco
January 27, 2022
Was ich ganz besonders super fand, waren die sehr anfängerfreundlichen Erklärungen! Ein schöner Kurs. :)
Dorothea
January 20, 2022
Super erklärt und ausführlich! Dauert etwas über 5 Stunden aber man lernt ja auch wirklich detailliert was
Anderson
January 19, 2022
Top Kurs! Die Inhalte sind verständlich und abwechslungsreich. Ich hatte kein Vorwissen, aber konnte trotzdem gut folgen. Und das Spiel ist cool☺️
Tolga
January 19, 2022
Der Kurs ist leicht verständlich, gut strukturiert und die Sinah erklärt alles auf eine sehr angenehme und unprätentiöse Art und Weise. Fragen und Schwierigkeiten hatte ich keine. Einziges Manko, dass ich sehe, es gibt m.E. zu wenige weiterführende Links, aber no big deal, deswegen trotzdem 5 STERNE. Letzendlich mit seinem selbst gebauten Video-Game zu spielen ist schon den Preis wert. Auch wenn es am Ende nur ein 2/4 Tasten-Game ist, hatte ich viel Spaß damit, und kann jetzt meiner Family ganz besondere Geschenke "basteln".
Andreas
January 18, 2022
Ein hervorragender Einstieg in die Webentwicklung! Kurzatmig und schön dargestellt bietet der Kurs Wissen zu den verschiedenen Programmiersprachen und einen ausführlichen Praxisteil zum Selbstprobieren!
Mir
January 18, 2022
Ein sehr guter Kurs, kurzweilig und interessant. Ich hatte schon Vorkenntnisse, habe mich aber nicht gelangweilt, sondern noch Neues gelernt.
Ihsan
January 18, 2022
Die genannten Inhalte wurden hervorragend erklärt. Auch die didaktischen Mittel wurden passend gewählt, sodass das Lernen dem Teilnehmden einfacher fällt. Im Vergleich zu konventionellen Kursen wie z. B. an Unis, Volkshochschulen etc. wird dem Zuhörenden hier nicht langweilig. Ich empfehle diesen Kurs auf jeden Fall weiter!
Nergis
January 18, 2022
Toller Kurs! Ich habe ohne Vorkenntnisse durch deine Videos gelernt mit HTML, CSS und JavaScript umzugehen und den Spass am Programmieren gefunden! Die Videos sind klar und verständlich und haben eine tolle Länge. Ich freue mich darauf mehr von dir zu hören. Mach weiter so!

Charts

Price

Grundlagen in HTML, CSS und JavaScript spielerisch lernen - Price chart

Rating

Grundlagen in HTML, CSS und JavaScript spielerisch lernen - Ratings chart

Enrollment distribution

Grundlagen in HTML, CSS und JavaScript spielerisch lernen - Distribution chart
4428116
udemy ID
12/3/2021
course created date
1/19/2022
course indexed date
Bot
course submited by