LU01b - HTML/CSS/JS Basics

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

HTML repetieren:

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.

Tests zur Selbstkontrolle

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:

An interactive guide to flexbox: Flexbox zum Ausprobieren

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 * 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: * MDN: Test your skills – Selectors * MDN: Test your skills – The Cascade * MDN: Test your skills – The box model ===== 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 * JS Hero – JavaScript interaktiv üben (Deutsch) * MDN Skill-Checks – kurze Selbsttests (mit Live-Code) zu den Kern-Themen: * MDN: Test your skills – Variables * MDN: Test your skills – Conditionals * MDN: Test your skills – Functions ===== 4) DOM-Grundlagen (getElementById, Text/Style ändern) ===== * 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