LU01b - HTML/CSS/JS Basics
Ziel: Auffrischen der HTML-/CSS- und Javascript-Basics.
HTML repetieren:
YouTube Playlist: HTML Basics (englisch)
Tests zur Selbstkontrolle
MDN Skill-Checks (HTML) – genau die Basics, die wir in Formular-/UI-Seiten brauchen:
2) CSS Basics (Selektoren, Cascade, Box Model, Layout)
CSS repetieren Selektoren:
YouTube Video: Learn Every CSS Selector In 20 Minutes (englisch)
CSS repetieren Vererbung:
YouTube Video: Do You Really Understand CSS Inheritance? (englisch)
CSS repetieren Box Model:
YouTube Video: Learn CSS Box Model In 8 Minutes (englisch)
CSS repetieren Positionieren:
YouTube Video: Learn CSS Position In 9 Minutes (englisch)
CSS repetieren Display:
YouTube Video: Learn CSS Display Property In 4 Minutes (englisch)
CSS repetieren Flexbox:
YouTube Video: Learn Flexbox in 15 Minutes (englisch)
CSS repetieren Grid:
YouTube Video: Learn CSS Grid in 20 Minutes (englisch)
Spiele und Tests zur Selbstkontrolle
CSS Diner – Game zu
CSS-Selektoren
Coding Fantasy – Flexbox – Game zu Flexbox
Coding Fantasy – Grid Attack – Game zu Grid
Flexbox Froggy – Game zu Flexbox (für Layout/Navigationsleisten extrem nützlich)
MDN Skill-Checks (CSS) – kurze Checks zu den Basics:
3) JavaScript Basics (Syntax & Logik)
JS repetieren Variablen: var, let, const:
YouTube Video: Differences Between Var, Let, and Const (englisch)
JS repetieren Variablen, Konstanten, Zeichenketten, Zahlen, Arrays, Objekte, Funktionen:
YouTube Video: JavaScript Course for Beginners – Your First Step to Web Development (englisch)
Spiele und Tests zur Selbstkontrolle
JS Hero (DE) – interaktive Übungen zu Variablen, Datentypen, If/Else, Funktionen
MDN Skill-Checks – kurze Selbsttests (mit Live-Code) zu den Kern-Themen:
4) DOM-Grundlagen (getElementById, Text/Style ändern)
Scrimba: Intro to the DOM – interaktiv, inkl. *Selecting Elements – getElementById* & einfache Manipulationen
MDN Skill-Check Events – Klick/Events + DOM-Änderungen üben