de:modul:m291:learningunits:lu01:theorie:b_repetition

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu01:theorie:b_repetition [2026/01/31 13:51] – gkochde:modul:m291:learningunits:lu01:theorie:b_repetition [2026/02/02 14:07] (aktuell) – gkoch
Zeile 3: Zeile 3:
 Ziel: Auffrischen der HTML-/CSS- und Javascript-Basics. Ziel: Auffrischen der HTML-/CSS- und Javascript-Basics.
  
 +===== 1) HTML Struktur (Elemente, Attribute, Links, Bilder, Forms) =====
  
-===== 1) JavaScript Basics (Syntax & Logik) ===== +==== HTML repetieren: ====
-  * **JS Hero (DE)** – interaktive Übungen zu Variablen, Datentypen, If/Else, Funktionen +
-    * [[https://www.jshero.net/home.html|JS Hero – JavaScript interaktiv üben (Deutsch)]] +
-  * **MDN Skill-Checks** – kurze Selbsttests (mit Live-Code) zu den Kern-Themen: +
-    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Variables|MDN: Test your skills – Variables]] +
-    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Conditionals|MDN: Test your skills – Conditionals]] +
-    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Functions|MDN: Test your skills – Functions]]+
  
-===== 2) DOM-Grundlagen (getElementById, Text/Style ändern) ===== +{{youtube>BvJYXl2ywUE?}} 
-  * **Scrimba: Intro to the DOM** – interaktiv, inkl. *Selecting Elements – getElementById* & einfache Manipulationen +//YouTube Playlist: HTML Basics (englisch)// 
-    * [[https://scrimba.com/playlist/p7wk6TL|Scrimba – Intro to the DOM (inkl. getElementById)]] + 
-  * **MDN Skill-Check Events** – Klick/Events + DOM-Änderungen üben +==== Tests zur Selbstkontrolle ==== 
-    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Events|MDN: Test your skills – Events]]+ 
 +  * **MDN Skill-Checks (HTML)** – genau die Basics, die wir in Formular-/UI-Seiten brauchen: 
 +    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics|MDN: Test your skills – HTML text basics]] 
 +    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links|MDN: Test your skills – Links]] 
 +    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images|MDN: Test your skills – HTML images]] 
 +    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons|MDN: Test your skills – Forms and buttons]] 
 + 
 + 
 +===== 2) CSS Basics (Selektoren, Cascade, Box Model, Layout) ===== 
 + 
 +==== CSS repetieren Selektoren: ==== 
 + 
 +{{youtube>l1mER1bV0N0?}} 
 +//YouTube Video: Learn Every CSS Selector In 20 Minutes (englisch)// 
 + 
 +==== CSS repetieren Vererbung: ==== 
 + 
 +{{youtube>N8tFrMZp_wA?}} 
 +//YouTube Video: Do You Really Understand CSS Inheritance? (englisch)// 
 + 
 +==== CSS repetieren Box Model: ==== 
 + 
 +{{youtube>rIO5326FgPE?}} 
 +//YouTube Video: Learn CSS Box Model In 8 Minutes (englisch)// 
 + 
 +==== CSS repetieren Positionieren: ==== 
 + 
 +{{youtube>jx5jmI0UlXU?}} 
 +//YouTube Video: Learn CSS Position In 9 Minutes (englisch)// 
 + 
 +==== CSS repetieren Display: ==== 
 + 
 +{{youtube>Qf-wVa9y9V4?}} 
 +//YouTube Video: Learn CSS Display Property In 4 Minutes (englisch)// 
 + 
 +==== CSS repetieren Flexbox: ==== 
 + 
 +{{youtube>fYq5PXgSsbE?}} 
 +//YouTube Video: Learn Flexbox in 15 Minutes (englisch)// 
 + 
 +==== CSS repetieren Grid: ==== 
 + 
 +{{youtube>9zBsdzdE4sM?}} 
 +//YouTube Video: Learn CSS Grid in 20 Minutes (englisch)// 
 + 
 +==== Spiele und Tests zur Selbstkontrolle ====
  
-===== 3) CSS Basics (Selektoren, Cascade, Box Model, Layout) ===== 
   * **CSS Diner** – Game zu CSS-Selektoren   * **CSS Diner** – Game zu CSS-Selektoren
     * [[https://flukeout.github.io/|CSS Diner – CSS Selectors Game]]     * [[https://flukeout.github.io/|CSS Diner – CSS Selectors Game]]
Zeile 32: Zeile 71:
     * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Box_model|MDN: Test your skills – The box model]]     * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Test_your_skills/Box_model|MDN: Test your skills – The box model]]
  
-===== 4) HTML Struktur (Elemente, Attribute, Links, Bilder, Forms) ===== + 
-  * **MDN Skill-Checks (HTML)** – genau die Basics, die wir in Formular-/UI-Seiten brauchen: +===== 3) JavaScript Basics (Syntax & Logik) ===== 
-    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/HTML_text_basics|MDN: Test your skills – HTML text basics]] + 
-    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Links|MDN: Test your skills – Links]] +==== JS repetieren Variablen: var, let, const: ==== 
-    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Images|MDN: Test your skills – HTML images]] + 
-    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Test_your_skills/Forms_and_buttons|MDN: Test your skills – Forms and buttons]]+{{youtube>9WIJQDvt4Us?}} 
 +//YouTube Video: Differences Between Var, Let, and Const (englisch)// 
 + 
 + 
 +==== JS repetieren Variablen, Konstanten, Zeichenketten, Zahlen, Arrays, Objekte, Funktionen: ==== 
 + 
 +{{youtube>W6NZfCO5SIk?}} 
 +//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 
 +    * [[https://www.jshero.net/home.html|JS Hero – JavaScript interaktiv üben (Deutsch)]] 
 +  * **MDN Skill-Checks** – kurze Selbsttests (mit Live-Code) zu den Kern-Themen: 
 +    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Variables|MDN: Test your skills – Variables]] 
 +    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Conditionals|MDN: Test your skills – Conditionals]] 
 +    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Functions|MDN: Test your skills – Functions]] 
 + 
 +===== 4) DOM-Grundlagen (getElementById, Text/Style ändern) ===== 
 +  * **Scrimba: Intro to the DOM** – interaktiv, inkl. *Selecting Elements – getElementById* & einfache Manipulationen 
 +    * [[https://scrimba.com/playlist/p7wk6TL|Scrimba – Intro to the DOM (inkl. getElementById)]] 
 +  * **MDN Skill-Check Events** – Klick/Events + DOM-Änderungen üben 
 +    * [[https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Test_your_skills/Events|MDN: Test your skills – Events]] 
 + 
 + 
 + 
  
  
  
  • de/modul/m291/learningunits/lu01/theorie/b_repetition.1769863867.txt.gz
  • Zuletzt geändert: 2026/01/31 13:51
  • von gkoch