HTML/CSS Fortgeschrittene Kurs – Flexbox, Grid und moderne Web-Technologien

Kursbeschreibung ​

In diesem praxisorientierten Kurs vertiefst du deine HTML- und CSS-Kenntnisse und lernst moderne Techniken für professionelle Weblayouts. Wir arbeiten intensiv mit Flexbox und CSS Grid, um komplexe Layouts sauber und responsive umzusetzen. Du lernst die BEM-Namenskonvention für wartbares CSS, den Einsatz von SASS/SCSS für effiziente Stylesheet-Entwicklung und fortgeschrittene Features wie Mixins, Funktionen und Placeholders.
Ausserdem setzen wir Transitions, Animationen und Utility-First-Ansätze (TailwindCSS) ein, um deine Projekte interaktiv und performant zu gestalten. Ergänzend erhältst du wertvolle HTML/CSS-Tricks für besondere Design-Effekte.

Zielgruppe ​

Für Webentwickler, Designer und Content-Manager, die bereits solide HTML- und CSS-Kenntnisse besitzen und ihre Fähigkeiten für komplexere, performante und moderne Webprojekte erweitern wollen.

Lernziele ​

Nach diesem Kurs kannst du:

• Flexbox und CSS Grid für moderne, responsive Layouts einsetzen.
• BEM als Namenskonvention für sauberen, skalierbaren Code nutzen.
• SASS/SCSS einsetzen, um Styles zu strukturieren und wiederverwendbar zu machen.
• Fortgeschrittene SASS-Techniken wie Mixins, Extends, Functions anwenden.
• CSS Transitions und Keyframe-Animationen gezielt einsetzen.
• Utility-First-Ansätze wie TailwindCSS in Projekten verwenden.
• HTML/CSS-Tricks (Gradients, Blendmodes, Object-Fit, Container Queries) gezielt anwenden.

Kursinhalte (Stichworte) ​

• CSS-Vertiefung & Best Practices
  • Selektoren, Spezifität, Block- vs. Inline-Elemente.
  • !important und warum man es vermeiden sollte.
• Flexbox
  • Container- & Item-Properties.
  • Responsive Layouts, Holy Grail Pattern, eigene Grid-Systeme.
• CSS Grid
  • Grid Areas, Tracks, Named Lines.
  • Zwei-dimensionale Layouts mit Responsive-Anpassungen.
• BEM (Block, Element, Modifier)
  • Strukturierte Benennung & Wartbarkeit.
• SASS / SCSS
  • Variablen, Verschachtelung, Partials, Imports.
  • Mixins, Extends, Placeholders, Functions.
• Transitions & Animationen
  • Transition-Properties, Timing-Functions.
  • Keyframe-Animationen und sinnvolle Einsatzgebiete.
• Utility-First CSS
  • TailwindCSS: Installation, Konfiguration, Einsatz.
• HTML/CSS Tricks
  • Gradients, Blendmodes, Filter, Object-Fit.
  • Container Queries, Pseudo-Elemente, CSS Counter.

Vorkenntnisse / Anforderungen ​

• Erfolgreicher Abschluss der Kurse "HTML 5 Grundlagen" und "CSS Grundlagen" oder gleichwertige Kenntnisse.
• Eigenen Laptop (Windows, macOS oder Linux) für praktische Übungen.
• Sicherer Umgang mit einem Code-Editor (z.B. VSCode).

Methodik ​

Du arbeitest in kleinen Gruppen direkt am eigenen Projekt. Die Dozenten vermitteln die Theorie kompakt und setzen den Schwerpunkt auf praxisorientierte Übungen und Best Practices.

Besonderheiten ​

• Praxisnah: Alle Techniken werden direkt im Projekt angewendet.
• Modern: Fokus auf aktuelle Layout-Techniken und Tools.
• Interaktiv: Zahlreiche Übungen und Challenges.
• Direkt anwendbar: Nach dem Kurs kannst du die gelernten Techniken sofort in deinen Projekten einsetzen.