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 🗙