LU01b - HTML/CSS/JS Basics

Ziel: Auffrischen der HTML-/CSS- und Javascript-Basics.

1) HTML Struktur (Elemente, Attribute, Links, Bilder, Forms)

YouTube Playlist: HTML Basics (englisch)

Periodic Table of HTML Elements by madebymike: interaktive Karte mit vielen HTML-Elementen

A Blog Post With Every HTML Element by Patrick Weaver Viele HTML-Elemente kategorisiert und kurz erklärt.

MDN Skill-Checks (HTML) – genau die Basics, die wir in Formular-/UI-Seiten brauchen:

YouTube Video: Learn Every CSS Selector In 20 Minutes (englisch)

YouTube Video: Do You Really Understand CSS Inheritance? (englisch)

YouTube Video: Learn CSS Box Model In 8 Minutes (englisch)

YouTube Video: Learn CSS Position In 9 Minutes (englisch)

YouTube Video: Learn CSS Display Property In 4 Minutes (englisch)

An interactive guide to flexbox: Flexbox zum Ausprobieren

YouTube Video: Learn Flexbox in 15 Minutes (englisch)

YouTube Video: Learn CSS Grid in 20 Minutes (englisch)

CSS Diner – Game zu CSS-Selektoren
- CSS Diner – CSS Selectors Game
Coding Fantasy – Flexbox – Game zu Flexbox
- Coding Fantasy – Flexbox
Coding Fantasy – Grid Attack – Game zu Grid
- Coding Fantasy – Grid
Flexbox Froggy – Game zu Flexbox (für Layout/Navigationsleisten extrem nützlich)
- Flexbox Froggy – Flexbox Game
MDN Skill-Checks (CSS) – kurze Checks zu den Basics:

YouTube Video: Differences Between Var, Let, and Const (englisch)

YouTube Video: JavaScript Course for Beginners – Your First Step to Web Development (englisch)

JS Hero (DE) – interaktive Übungen zu Variablen, Datentypen, If/Else, Funktionen
- JS Hero – JavaScript interaktiv üben (Deutsch)
MDN Skill-Checks – kurze Selbsttests (mit Live-Code) zu den Kern-Themen:

Scrimba: Intro to the DOM – interaktiv, inkl. *Selecting Elements – getElementById* & einfache Manipulationen
- Scrimba – Intro to the DOM (inkl. getElementById)
MDN Skill-Check Events – Klick/Events + DOM-Änderungen üben
- MDN: Test your skills – Events