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
Erfahrungsberichte (3)
Ich habe viel Spaß beim Erlernen von KI-Angriffen und den verfügbaren Tools gehabt, um mit Sicherheitsprüfungen zu beginnen und diese aktiv einzusetzen. Ich habe viele neue Erkenntnisse gewonnen, die ich zuvor noch nicht hatte, und der Kurs hat meine Erwartungen erfüllt. Mein Lieblingsbereich aus dem Training war der Comet Browser, und ich war von seinen Möglichkeiten beeindruckt. Auf jeden Fall werde ich mich damit intensiver beschäftigen. Insgesamt war es ein großartiger Kurs, und ich habe das Lernen über die OWASP GenAI Top 10 sehr genossen.
Patrick Collins - Optum
Kurs - OWASP GenAI Security
Maschinelle Übersetzung
Praktisch, Übungen, persönliches Helfen und Fragenstellen.
Jose Paulos - INESC TEC
Kurs - Tailwind CSS
Maschinelle Übersetzung
Dass jede technische Lektion mit mehreren praktischen Übungen zur Vertiefung der Konzepte kam.
Andrei-Calin Bajea
Kurs - OWASP Top 10 2025
Maschinelle Übersetzung