Moderne Webentwicklung mit HTML5, JavaScript (ES2024) und CSS3

Dauer: 5 Tage

Dieses Training bietet eine umfassende Einführung in moderne Webentwicklung mit HTML5, aktuellen JavaScript-Standards (ES2024) und CSS3. Die vermittelten Grundlagen sind essentiell für die Entwicklung moderner Web-Anwendungen, Progressive Web Apps (PWAs) und Single Page Applications (SPAs).

Zielgruppe

• Developers and technical professionals who want to deepen their skills in Moderne Webentwicklung mit HTML5, JavaScript (ES2024) und CSS3.
• Architects and team leads evaluating practical implementation patterns.
• Teams adopting modern engineering practices for delivery and operations.

Voraussetzungen

• Basic software development experience
• Familiarity with common development tools and workflows
• Interest in applying the course topics in real projects

Lernziele

• Understand the core concepts and architecture behind the course topic
• Apply recommended implementation patterns in practical scenarios
• Build and validate solutions using modern tooling and workflows
• Troubleshoot common issues and improve reliability
• Plan next steps for production-ready adoption

Kursinhalt

• Moderne HTML5 und Semantic Web

  • Semantische HTML5-Elemente und Zugänglichkeit (a11y)
  • Web Components und Custom Elements
  • Progressive Enhancement und Graceful Degradation
  • SEO-optimierte HTML-Strukturen
  • ARIA und Accessibility Best Practices
  • Moderne Entwicklungsumgebung (VS Code, Extensions, DevTools)

• JavaScript ES2024+ und Moderne Sprachfeatures

  • ES2024+ Syntax: Optional Chaining, Nullish Coalescing, Top-level await
  • Modules (ESM) und moderne Import/Export-Patterns
  • Template Literals und Tagged Templates
  • Destructuring, Spread/Rest Operators
  • Arrow Functions und Lexical Scoping
  • Classes, Inheritance und Private Fields
  • Promises, async/await und moderne Asynchronous Patterns
  • Iterators, Generators und Async Iterators

• Moderne CSS3 und Layout-Techniken

  • CSS Grid Layout für komplexe Layouts
  • Flexbox für flexible Komponenten-Layouts
  • CSS Custom Properties (CSS Variables)
  • Container Queries und Element Queries
  • CSS Logical Properties für Internationalisierung
  • CSS Cascade Layers und @layer
  • Modern CSS Selectors (:has(), :is(), :where())
  • CSS Houdini und Paint API
  • PostCSS und CSS-in-JS Ansätze

• Responsive Design und Mobile-First

  • Mobile-First Design Patterns
  • Advanced Media Queries und Breakpoint-Strategien
  • Touch-Gesten und Mobile Interaction Patterns
  • Performance für Mobile Geräte
  • Progressive Web App (PWA) Design Principles

• Moderne Web-APIs und Browser-Features

  • Fetch API und moderne HTTP-Client-Patterns
  • Web Storage (localStorage, sessionStorage, IndexedDB)
  • Web Workers und Shared Workers
  • Service Workers für Offline-Funktionalität
  • Push Notifications und Background Sync
  • WebAssembly (WASM) Integration

• Asynchrone Programmierung und State Management

  • Promise Patterns und Error Handling
  • async/await Best Practices
  • RxJS und Reactive Programming
  • State Management Patterns (Redux, Zustand, Context API)
  • WebSockets und Server-Sent Events (SSE)

• Component-Based Architecture

  • Vanilla JavaScript Components
  • Web Components (Custom Elements, Shadow DOM, HTML Templates)
  • Component Lifecycle und State Management

• Progressive Web Apps (PWAs)

  • Service Worker Lifecycle und Caching Strategies
  • App Manifest und Installation
  • Offline-First Design Patterns
  • Background Sync und Push Notifications

• Performance und Optimierung

  • Core Web Vitals (LCP, FID, CLS)
  • Critical Rendering Path Optimization
  • Lazy Loading und Code Splitting
  • Image Optimization (WebP, AVIF, Responsive Images)
  • Bundle Analysis und Tree Shaking

• Moderne Entwicklungstools und Workflows

  • Vite und moderne Build-Tools
  • Package Managers (npm, yarn, pnpm)
  • TypeScript Grundlagen und Integration
  • ESLint, Prettier und Code Quality Tools
  • CI/CD für Frontend-Projekte
  • Testing (Jest, Vitest, Playwright, Testing Library)

• Web Security und Best Practices

  • Content Security Policy (CSP)
  • Cross-Origin Resource Sharing (CORS)
  • Authentication Patterns (JWT, OAuth)
  • XSS, CSRF und andere Sicherheitslücken

• TypeScript Fundamentals

  • TypeScript Typen und Interfaces
  • Generics und Advanced Types
  • Integration mit JavaScript-Projekten

• Testing und Debugging

  • Unit Testing mit Jest/Vitest
  • Integration Testing mit Testing Library
  • End-to-End Testing mit Playwright/Cypress

• Deployment und DevOps

  • Static Site Hosting (Netlify, Vercel, GitHub Pages)
  • CDN und Edge Computing
  • Monitoring und Analytics
  • Performance Budgets und Continuous Performance

Praktische Übungen

• Set up a working project baseline for the course topic
• Implement a core feature and validate expected behavior
• Integrate testing or automation to improve quality and repeatability

Ergebnisse

Nach Abschluss dieses Kurses können die Teilnehmenden die vermittelten Konzepte und Werkzeuge anwenden, um belastbare Lösungen in realen Projekten umzusetzen.