Web-Entwicklung

Moderne Webentwicklung mit HTML5, JavaScript (ES2024) und CSS3

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).

Es werden aus dem Bereich moderner Frontend-Entwicklung folgende Themen abgedeckt: Semantisches HTML5, moderne CSS-Layout-Techniken (Grid, Flexbox), ES2024+ JavaScript-Features, Komponenten-basierte Entwicklung, State Management, Build-Tools und moderne Entwicklungsworkflows, Performance-Optimierung, Accessibility (a11y) und moderne Web-APIs.

Das Training verwendet aktuelle Best Practices und moderne Entwicklungstools wie Vite, TypeScript und moderne Browser-APIs. Es wird gezeigt, wie Prinzipien und Technologien der modernen Webentwicklung angewendet werden, um skalierbare und wartbare Webanwendungen zu erstellen.

  • 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
    • Viewport Meta Tag und moderne Viewport-Einheiten
    • 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)
    • Intersection Observer für Performance-optimiertes Scrolling
    • Resize Observer und Mutation Observer
    • Web Workers und Shared Workers
    • Service Workers für Offline-Funktionalität
    • Push Notifications und Background Sync
    • WebAssembly (WASM) Integration
    • File System Access API
    • Web Share API und Navigator APIs

  • 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)
    • Event-driven Architecture
    • WebSockets und Server-Sent Events (SSE)
    • Real-time Data Synchronization

  • Component-Based Architecture

    • Vanilla JavaScript Components
    • Web Components (Custom Elements, Shadow DOM, HTML Templates)
    • Component Lifecycle und State Management
    • Props, Events und Component Communication
    • Styling Strategies für Components
    • Testing von Komponenten

  • Progressive Web Apps (PWAs)

    • Service Worker Lifecycle und Caching Strategies
    • App Manifest und Installation
    • Offline-First Design Patterns
    • Background Sync und Push Notifications
    • PWA Performance Optimization
    • App Shell Architecture

  • 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
    • Performance Monitoring und Analytics
    • Lighthouse und Web Vitals Measurement

  • Moderne Entwicklungstools und Workflows

    • Vite und moderne Build-Tools
    • Package Managers (npm, yarn, pnpm)
    • TypeScript Grundlagen und Integration
    • ESLint, Prettier und Code Quality Tools
    • Git Workflows und Collaboration
    • 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)
    • HTTPS und TLS Best Practices
    • XSS, CSRF und andere Sicherheitslücken
    • Secure Coding Practices

  • TypeScript Fundamentals

    • TypeScript Typen und Interfaces
    • Generics und Advanced Types
    • Type Guards und Type Assertions
    • Module System und Declaration Files
    • Integration mit JavaScript-Projekten
    • Migration Strategies von JavaScript zu TypeScript

  • Testing und Debugging

    • Unit Testing mit Jest/Vitest
    • Integration Testing mit Testing Library
    • End-to-End Testing mit Playwright/Cypress
    • Browser DevTools Advanced Features
    • Performance Profiling und Memory Debugging
    • Error Monitoring und Logging

  • Deployment und DevOps

    • Static Site Hosting (Netlify, Vercel, GitHub Pages)
      • CDN und Edge Computing
      • Environment Management
      • Monitoring und Analytics
      • Performance Budgets und Continuous Performance
An unhandled error has occurred. Reload 🗙