Übergreifende Kompetenzbänder:
| Anzahl Lektionen | Themen | Kompetenzen | Tools |
|---|---|---|---|
| 2 | Einführung in Modul 293 Modulübersicht mit Inhaltsstruktur, Bekanntgabe Lernziele und Projektauftrag Entwicklungsumgebung einrichten (z.B. VS Code, Live Server Extension, Browser) | D1* | Dev-Tool (z.B. VS Code) Browser |
| 4 | Einführung HTML Grundelemente und Aufbau einer Webseite (z.B. html, head, body) Textauszeichnungen und Listen, Verschachtelung von HTML-Elementen (z.B. h1-h3, p, ul/ol-li) Links, Bilder und Medien, Funktion von HTML-Attributen (z.B. href, src, alt) Einbindung CSS und JavaScript | D1E E1* | Dev-Tool (z.B. VS Code) |
| 6 | Einführung Webdesign Styling mit CSS (z.B. Boxmodel, Typografie, Farben) Strukturelemente für Semantik und Layout (z.B. div, article, nav, section, table) Gestaltungsentwurf als Layout mit Grid-System umsetzen (z.B. Boxmodel, Positionierung, Floating) Darstellung auf Mobile, Tablet und Desktop mit Responsive Webdesign (z.B. Grid System, Flexbox, Media Queries) | D1E E1E G1* G2* | Dev-Tool (z.B. VS Code) Evtl. Frameworks (z.B. Bootstrap) |
| 8 | Einführung Webentwicklung Übersicht Browser-Werkzeuge (z.B. Inspektor, Konsole, Netzwerkanalyse) Prinzipien einer HTTP-Anfrage (Request, Response, Stateless, Asynchron) Aufbau HTTP-Protokoll und Anfragemethoden (z.B. Header, Body, POST, GET) Formulare entwerfen und umsetzen, Validierung (Wohin sollen die Daten gesendet werden?) JavaScript Basics, Ausblick Frameworks, Hinweis üK-294 und üK-295 | B1* C1* E1E F1* F2* | Browser Developer Tools (z.B. Chrome) HTTP Analyse Tools (z.B. Fiddler, postman) |
| 4 | Einführung Webstandards W3C Spezifikation, Konventionen und Browserkompatibilität Optimierungs-Werzeuge (z.B. Validatoren, Linter) Coding- und Style-Guidlines (z.B. Html, CSS, Javascript, Accessibility Guidelines) | H1* H2* | z.B. https://validator.w3.org/ |
| 8 | Einführung Webpublishing Web-Architektur und Hosting-Technologien (z.B. DNS, Server, Static, dynamic, virtual, dediziert, Cloud) Publikations-Werkzeuge (z.B. ftp, ssh, sftp, scp, gulp, grunt, webpack) Continous Integration (z.B. git+) | H2* I1* | FTP, SSH Tools (z.B. FileZilla, Putty) Git (z.B. Tortoise git, Cmd-Line Tools) |
| 4 | Reserve resp. optional Dynamische Webseiten mit CMS-Anbindung (WordPress) Template-Erstellung | ||
| 4 | Zeit für Kompetenznachweise, verteilt in den oberen Blöcken |