Programming in HTML5 with JavaScript and CSS3 — Web-Frontend-Grundlagen

Wer im Web entwickelt, braucht alle drei Basis-Technologien: HTML für Struktur, CSS für Styling, JavaScript für Verhalten. Dieser Kurs vermittelt die Grundlagen und ist Einstiegspunkt für moderne Web-Entwicklung (React, Angular, Vue) oder klassische Backend-Entwicklung mit HTML/CSS/JS-Frontend. Block HTML5-Grundlagen: Dokument-Struktur (DOCTYPE, html, head, body), Meta-Tags (charset, viewport, description, robots), semantische Tags (header, nav, main, article, section, aside, footer), Inhaltselemente (p, h1-h6, ul/ol/li, blockquote, code, pre), Inline-Formatierung (strong, em, span, a, img), Form-Elemente (input mit allen Types, textarea, select, button, fieldset, legend), Form-Validation mit HTML5 (required, pattern, min/max), Tabellen (table, thead, tbody, tr, td, th, mit colspan/rowspan), Media-Tags (audio, video, picture mit source-Tags für Responsive Images), Semantic Search Optimization. Block CSS3-Styling: Selektoren (Element, Class, ID, Attribut, Pseudo-Class wie :hover/:focus/:nth-child, Pseudo-Element wie ::before/::after, Kombinatoren), Box Model (margin, border, padding, content — box-sizing: border-box als Standard), Display (block, inline, inline-block, none, flex, grid), Position (static, relative, absolute, fixed, sticky), Typography (font-family, font-size, font-weight, line-height, letter-spacing, text-transform), Colors (Hex, RGB, RGBA, HSL, HSLA, named Colors), Background (color, image, gradient, position, repeat, size, attachment), Flexbox-Grundlagen (flex-direction, justify-content, align-items, gap), Grid-Grundlagen (grid-template-columns/rows, grid-area), Transitions (transition-property/duration/timing-function), einfache Animationen (@keyframes, animation), Responsive Design mit Media Queries. Block JavaScript-Grundlagen: Variablen (let, const, var und ihre Unterschiede), Datentypen (Number, String, Boolean, Object, Array, null, undefined, Symbol), Operatoren (arithmetisch, vergleichend, logisch, ternär), Kontrollstrukturen (if/else, switch, while, for, for...of, for...in), Funktionen (Function Declaration, Function Expression, Arrow Functions), Scope (Global, Function, Block), Closures, Higher-Order Functions (map, filter, reduce, forEach). Block DOM-Manipulation: document.getElementById/querySelector/querySelectorAll, Element-Eigenschaften (textContent, innerHTML, classList, style, dataset), DOM-Manipulation (createElement, appendChild, removeChild, insertBefore), Event-Handling (addEventListener, Event-Objekt, preventDefault, stopPropagation, Delegation). Block Asynchrone Programmierung: Callbacks (mit Problem: Callback Hell), Promises (then/catch/finally, Promise.all, Promise.race), async/await als moderne Syntax, Fetch API für HTTP-Requests. Block Module: ES Modules (import/export), CommonJS (für Node.js). Block Visual Studio (oder VS Code) für Web-Entwicklung: Setup, Debugging (Chrome DevTools, VS Code Debugger), Browser DevTools (Elements, Console, Network, Sources, Performance, Application).