CSS-Ausbildungsprogramm (3 Tage)

Ausbildungsziele:

• Die Grundlagen von CSS verstehen und beherrschen um Webseiten zu strukturieren und zu stilisieren.

• Erstellen Sie komplexe Layouts mit Flexbox und Grid.

• Entwicklung verantwortungsvoller Websites und angepasst an verschiedene Arten von Bildschirmen.

• CSS-Code optimieren und integrieren Sie einfache Animationen für ein besseres visuelles Rendering.

INTERPRETATION

- Anwesend in unseren Räumlichkeiten oder bei Ihnen

Distanciel Online

Finden Sie uns auf:

Straßburg, Lille, Lyon, Reims, Genf, Brüssel, Luxemburg, Frankfurt, Karlsruhe, Berlin, Metz

Preis: 1966 € H.T.
Daten, Orte und Registrierung
INTRA

(Rufen Sie uns an, um ein Angebot zu erhalten)

Tag 1: Einführung in CSS und Grundformatierung

Morgen: Einführung in CSS

 •  Was ist CSS?

  • Rolle von CSS bei der Webentwicklung
  • Struktur einer CSS-Datei
  • CSS-Selektoren (Elemente, Klassen, IDs)
  • Link zwischen HTML und CSS (Tag) , Attribut style

 •  CSS Syntax

  • Eigenschaften und Werte
  • Erklärung der CSS-Regeln
  • Wie man gültige CSS-Regeln schreibt

 •  CSS-Selektoren:

  • Grundlegende Selektoren: Typ, Klasse, ID
  • Kombinierte Selektoren: Nachkommen, Kind, Bruder
  • Universal und Pseudo-Selektoren (:hover, :first-child, etc.)

Nachmittag: Grundform der Elemente

 •  Texteigenschaften:

  • Schriftfamilie, Schriftgröße, Schriftgewicht
  • Linienhöhe, Buchstabenabstand
  • text-align, text-transform
  • Textdekoration (Textdekoration, Textschatten)

 •  Farbe und Hintergrundeigenschaften:

  • Farben (Farbe, Hintergrundfarbe, rgba, hsla)
  • Hintergrundeigenschaften (Bilder, Positionierung, Größe, Wiederholung)

 •  Box Shaping (Box Model):

  • Eigenschaften Rand, Polsterung, Rand, Breite, Höhe
  • CSS-Boxvorlage und die Rolle jeder Eigenschaft im Abstand
  • Unterschied zwischen Border Box und Content Box

Tag 2: Layout und Positionierung

Morgens: Elemente Layout und Flexbox

 •  Positionierung der Elemente:

  • Statisch, relativ, absolut, behoben, klebrig
  • Mit Eigenschaften oben, links, rechts, unten

 •  Flexbox:

  • Einführung in Flexbox: Was ist los?
  • Flex Container Eigenschaften : Display: flex, flex-direction, justify-content, align-items
  • Flexelementeigenschaften : Flex-grow, Flex-shrink, Flex-base, align-self

Nachmittag : Grid Layout und erweitertes Layout

 •  CSS Gitter:

  • Einführung in das Gitterlayout: Container und Gitterelemente
  • Containereigenschaften Raster : Display: Raster, Rastervorlagenreihen, Rastervorlagenspalten
  • Anordnung von Elementen in einem Gitter: Gitterreihe, Gittersäule, Gitterfläche
  • Verwendung von fr, auto und repeat-Werten

 •  Erweiterte Layout-Techniken:

  • Verwendung der Position in Kombination mit z-index
  • Responsive Layouttechniken (Arbeiten mit relativen Einheiten wie %, em, rem, vw, vh)
  • Ausrichtung und Verteilung von Elementen mit Flexbox und Grid

Tag 3: Reaktivität, Animation und bewährte Verfahren

Morgen: Responsive Design mit Media Queries

 •  Einführung in die Medien Abfragen:

  • Rolle von Medienfragen im Responsive Design
  • Syntax von Medienanfragen (@media)
  • Beispiele gemeinsamer Breakpoints (Smartphones, Tablets, Desktop)

 •  Relative Einheiten und Flexibilität der Layouts:

  • Verwendung relativer Einheiten (%, em, rem, vw, vh) für ein reibungsloses Layout
  • Reaktive Designtechniken mit Flexbox und Grid
  • Struktur eines flexiblen Designs mit adaptiven Säulen und Linien

Nachmittag: CSS-Animationen und bewährte Verfahren

 •  CSS-Animationen:

  • Einführung in CSS-Animationen: @keyframes Eigenschaften, Animation, Übergang
  • Erstellen Sie einfache Animationen (Schwebeneffekte, Übergänge zwischen Staaten)
  • Kontrolle der Dauer, Wiederholung und Verzögerung von Animationen

 •  Gute Praktiken und CSS-Optimierung:

  • Organisieren Sie Ihren CSS-Code: So strukturieren Sie eine CSS-Datei
  • CSS-Dateien für verbesserte Leistung minimieren und kombinieren
  • Verwendung von CSS-Vorprozessoren (Sass, Less) und ihrer Nützlichkeit
  • Validierung und Debugging seines CSS-Codes

Methodik

  • praktische Übungen : In jeder Session können die Teilnehmer praktische Übungen durchführen.
  • Gruppenprojekte : Arbeiten Sie an einem konkreten Projekt während der drei Tage, um das erworbene Wissen anzuwenden (Erstellung einer kompletten Webseite, Integration von Flexbox und Grid, responsive Design, etc.).
  • Fragen und Antworten : Am Ende eines jeden Tages wird eine Frage-und-Antwort-Sitzung alle Schwierigkeiten der Teilnehmer lösen.

Am Ende dieses dreitägigen Trainings können Sie moderne und interaktive Webseiten entwerfen und präsentieren, die an alle Arten von Geräten angepasst sind, unter Beachtung der besten Praktiken der Webentwicklung.