Kontakt aufnehmen

Schulungsübersicht

Struktur und Stil (HTML & CSS)

Einführung & Webtechnologien

  • Wie das Web funktioniert: Das Client-Server-Modell einfach erklärt.
  • Der Browser als Computer: Interpretation von Code.
  • HTML: Das Grundgerüst des Webs. Struktur, Hierarchie und semantische Tags.
  • CSS: Das Styling des Webs. Farben, Schriftarten und das Box-Modell.
  • Lab 1: Einrichten der Container-Umgebung und Erstellen einer statischen "Über mich"-Profilseite.

Arbeiten mit HTML & CSS (Tiefgang)

  • HTML: Listen, Links, Bilder und Formulare (wesentlich für die Benutzerinteraktion).
  • CSS: Text- und Hintergrundstyling. Einführung in Flexbox und Grid für moderne Layouts.
  • Responsive Design: Sicherstellung, dass die Site auf Mobilgeräten und Desktops funktioniert.
  • Lab 2: Verfeinerung der statischen Seite mit professionellem Styling und mobiler Responsivität.

Arbeiten mit dem DOM (Document Object Model)

  • Konzept: Verständnis, wie Code mit der visuellen Seite zusammenhängt.
  • Elemente auswählen: Wie man bestimmte Teile einer Webseite anspricht.
  • Manipulation: Ändern von Inhalten und Attributen über Code.
  • Lab 3: Ändern der Elemente der statischen Seite über Code (z.B. dynamisches Ändern eines Titels oder Bildes).

Das Gehirn (JavaScript)

Programmierung in JavaScript (Die Grundlagen)

  • Variablen & Datentypen: Speichern von Informationen (Text, Zahlen, true/false).
  • Logik: If/else-Anweisungen (Entscheidungen treffen).
  • Schleifen: Effizientes Wiederholen von Aktionen.
  • Funktionen: Erstellen wiederverwendbarer Codeblöcke (das "Rezept"-Konzept).
  • Lab 4: Erstellen eines einfachen Rechners oder Logikspiels mit JavaScript.

Interaktivität & Ereignisse

  • Event-Listener: Reagieren auf Klicks, Tastatureingaben und Seitenladungen.
  • Formularverarbeitung: Validieren von Benutzereingaben (z.B. Prüfen, ob eine E-Mail-Adresse gültig ist).
  • DOM-Manipulation: Dynamisches Hinzufügen und Entfernen von Elementen (z.B. eine To-Do-Liste).
  • Lab 5: Verwandlung des Rechners in eine interaktive Webanwendung mit UI-Feedback.

Daten abrufen (APIs)

  • Konzept: Wie Web-Apps mit anderen Servern kommunizieren (z.B. Abrufen von Wetterdaten oder Börsenkursen).
  • JSON: Die Sprache des Datenaustauschs.
  • Asynchrone Programmierung: Verständnis der Logik "Warten, dann tun", ohne den Browser einzufrieren.
  • Lab 6: Erstellen einer Funktion, die Live-Daten von einer öffentlichen API abruft und auf der Seite anzeigt.

Das professionelle Toolkit (Frameworks & Capstone)

Verwendung von Programmier-Frameworks

  • Warum Frameworks verwenden? (Konzepte von React, Vue oder Svelte).
  • Komponenten: Aufbau modularer, wiederverwendbarer Teile der Benutzeroberfläche.
  • State-Management: Verfolgen sich ändernder Daten.
  • Das Ökosystem: Verständnis von Paketen, Abhängigkeiten und Versionskontrolle (Git).
  • Lab 7: Refaktorisieren einer einfachen Funktion mit einem komponentenbasierten Ansatz.

Das Capstone-Projekt: Erstellen einer Webanwendung

  • Anforderung: Die Teilnehmer müssen eine funktionale Webanwendung erstellen (z.B. einen Budget-Tracker, ein Produkt-Dashboard oder eine Portfolio-Site).
  • Planung: Definieren der "User Story" und des technischen Umfangs.
  • Implementierung: Kombinieren der HTML/CSS-Struktur mit der JavaScript-Logik.
  • Debugging: Lesen von Fehlermeldungen und Beheben von fehlerhafter Logik.
  • Präsentation: Vorstellen der finalen Anwendung vor der Gruppe.

Schlusswort & Nächste Schritte

  • Technische Fachbegriffe: Ein Spickzettel für die Kommunikation mit Ingenieuren (API, Backend, Frontend, Git, Deployment).
  • Ressourcen-Leitfaden: Wo man mehr lernen kann (Dokumentation, StackOverflow, MDN).
  • Karriereintegration: Wie diese Fähigkeiten bei Rollen im Produktmanagement und Design helfen.
  • Fragen & Antworten und Kursbewertung.

Voraussetzungen

  • Grundlegende Computernutzung
  • Keine früheren Programmierkenntnisse erforderlich
 21 Stunden

Teilnehmerzahl


Preis je Teilnehmer (exkl. USt)

Erfahrungsberichte (3)

Kommende Kurse

Verwandte Kategorien