HTML5 Fortgeschrittene Kurs – Semantic Web und moderne Web Standards

Kursbeschreibung ​

Du hast die Grundlagen von HTML 5 gemeistert und möchtest nun tiefer in die Materie eintauchen, um wirklich moderne und leistungsstarke Webseiten zu entwickeln? Dieser Kurs ist dein nächster Schritt, um dein HTML-Wissen zu vertiefen und fortgeschrittene Techniken zu beherrschen.

Wir konzentrieren uns auf die erweiterten Funktionen von HTML 5, die über die reine Strukturierung von Text und Bildern hinausgehen. Du lernst, wie du interaktive Elemente mit neuen Formular-Typen und Validierungsmechanismen erstellst, Multimedia-Inhalte optimal einbindest und Webseiten für verschiedene Bildschirmgrössen vorbereitest. Ein besonderer Fokus liegt auf der semantischen Bedeutung von HTML 5 Elementen, die nicht nur für Suchmaschinen, sondern auch für Barrierefreiheit entscheidend ist. Wir zeigen dir zudem, wie du clientseitigen Speicher nutzt und die Performance deiner HTML-Struktur optimierst.

Unsere erfahrenen Dozenten, die ihr Wissen direkt aus der Praxis von Agenturen wie the-stack.dev mitbringen, führen dich im persönlichen Präsenzunterricht in Grabs SG durch diese fortgeschrittenen Themen. Der Kurs ist stark interaktiv gestaltet, mit vielen praktischen Übungen, die dir helfen, das Gelernte sofort anzuwenden und komplexe Konzepte zu verstehen. Nach diesem Kurs bist du bereit, anspruchsvollere Webprojekte anzugehen und eine solide Basis für weiterführende CSS- und JavaScript-Kurse zu legen.

Zielgruppe ​

Dieser Kurs richtet sich an Web-Entwickler, Designer und alle, die bereits über solide HTML 5 Grundlagen verfügen (z.B. durch den Kurs "HTML 5 Grundlagen") und ihr Wissen vertiefen möchten. Ideal für dich, wenn du moderne Webstandards beherrschen, interaktive Elemente erstellen und deine Webseiten für verschiedene Geräte optimieren willst.

Lernziele ​

Nach diesem Kurs kannst du:

• Fortgeschrittene HTML 5 Formular-Elemente und Validierungsmechanismen anwenden.
• Multimedia-Inhalte (Audio, Video, responsive Bilder) optimal in Webseiten einbinden.
• Die Canvas-API und SVG für grafische Elemente grundlegend verstehen und nutzen.
• Clientseitigen Speicher (Local Storage, Session Storage) für Webanwendungen einsetzen.
• Grundlagen von Offline-Webanwendungen und Geolocation-APIs verstehen.
• Semantisches HTML 5 für eine verbesserte Struktur und Barrierefreiheit nutzen.
• ARIA-Attribute zur Verbesserung der Web-Zugänglichkeit anwenden.
• HTML-Strukturen für responsive Webdesigns vorbereiten (Viewport, <picture>).
• Grundlegende Performance-Aspekte in HTML-Code identifizieren und optimieren.

Kursinhalte (Stichworte) ​

• Vertiefung Semantisches HTML 5:
  • Erweiterte Nutzung von <header>, <nav>, <main>, <article>, <section>, <footer>.
  • Neue semantische Elemente wie <figure>, <figcaption>, <mark>, <time>.
  • Bedeutung für SEO und Screenreader.
• Fortgeschrittene Formulare:
  • Neue Input-Typen (z.B. email, url, tel, date, range, color).
  • Formular-Validierung mit HTML 5 Attributen (required, pattern, min, max).
  • Datums- und Zeitauswahl.
• Multimedia-Integration:
  • Optimale Einbindung von Audio (<audio>) und Video (<video>).
  • Responsive Bilder mit <picture> und srcset.
  • WebP und andere moderne Bildformate.
• Grafiken im Web:
  • Einführung in die Canvas-API für dynamische 2D-Grafiken.
  • Verwendung von SVG (Scalable Vector Graphics) für Vektorgrafiken.
• Clientseitiger Speicher:
  • Local Storage und Session Storage: Daten im Browser speichern.
  • Anwendungsfälle und Best Practices.
• Offline-Webanwendungen & Geolocation (Grundlagen):
  • Einführung in den Application Cache (Manifest-Datei).
  • Nutzung der Geolocation API für standortbasierte Dienste.
• Web-Kommunikation (Konzepte):
  • Kurzer Überblick über Web Sockets und Server-Sent Events (Konzept und HTML-Integration).
  • Cross-Origin Resource Sharing (CORS) im Kontext von HTML.
• Barrierefreiheit (Accessibility) mit HTML:
  • Vertiefung der WCAG-Richtlinien im HTML-Kontext.
  • Einsatz von ARIA-Attributen (Accessible Rich Internet Applications).
  • Semantische Struktur für Screenreader.
• Performance-Optimierung in HTML:
  • Ladezeiten optimieren: Lazy Loading für Bilder und Iframes.
  • Asynchrone und defer-Attribute für Skripte.
  • Minimierung von DOM-Grösse.
• Vorbereitung für Responsive Design:
  • Viewport Meta Tag.
  • Grundlagen flexibler Bilder und Medien.

Vorkenntnisse / Anforderungen ​

• Erfolgreicher Abschluss des Kurses "HTML 5 Grundlagen" oder vergleichbare solide Kenntnisse in HTML.
• Sicherer Umgang mit einem Code-Editor (z.B. Visual Studio Code).
• Ein eigener Laptop (Windows, macOS oder Linux) ist für die praktischen Übungen zwingend erforderlich.
• Technisches Interesse und die Bereitschaft, sich mit komplexeren Webstandards auseinanderzusetzen.

Methodik ​

Dieser Kurs ist stark praxisorientiert und interaktiv gestaltet. Der Präsenzunterricht in Grabs SG ermöglicht dir direkten Austausch und sofortiges Feedback. Theoretische Konzepte werden durch zahlreiche Live-Demonstrationen und anspruchsvolle "Hands-on"-Übungen vertieft. Wir arbeiten in kleinen Gruppen, um eine individuelle Betreuung zu gewährleisten. Aktive Lernmethoden wie Pair Programming und Problem-Solving-Sessions fördern das gemeinsame Erarbeiten von Lösungen für komplexe Web-Herausforderungen.

Besonderheiten ​

• Persönliche Betreuung: Direkter Kontakt zu unseren Dozenten und Tutoren vor Ort in Grabs SG für individuelle Fragen und Hilfestellung.
• Tiefgehende Praxis: Fokus auf die Anwendung fortgeschrittener HTML 5 Features in realen Szenarien.
• Kleine Gruppen: Ermöglicht eine intensive Lernatmosphäre und massgeschneiderte Unterstützung.
• Expertise aus der Praxis: Profitiere vom Wissen unserer Dozenten, die selbst in Agenturen wie the-stack.dev tätig sind und dir aktuelle Einblicke und Best Practices vermitteln.
• Inklusive Kursmaterialien: Du erhältst umfassende Unterlagen und Code-Beispiele zum Nachschlagen.

Abschluss ​

Teilnahmebestätigung von Web Professionals