What you'll learn:
- Entwickle schicke Webseiten mit modernsten CSS-Features
- Lerne am Beispiel: Setze ein komplettes Projekt um
- Transitions, @keyframes: Erstelle komplexe Animationen - auch komplett ohne JavaScript
- Lerne wie CSS wirklich funktioniert: Layout, Vererbung, Positionierungen, Spezifität von Selektoren
- BEM-Components: Steigere deine Produktivität und schreibe wiederverwendbaren CSS-Code
- SASS: Strukturiere deine CSS-Dateien und behalte selbst bei 10.000+ Zeilen noch den Überblick
- Responsive Design: Mobile-First vs. Desktop-First, 1rem vs. 1em, ...
- 3D: Erstelle schicke 3D-Effekte mit CSS
Du hast schon etwas mit HTML und CSS entwickelt, und möchtest deine Kenntnisse jetzt ausbauen? Dir sind moderne CSS3-Features wie 3D-Effekte, Animationen, Flexbox oder Grid noch neu? Oder du möchtest einfach nur noch schickere Webseiten entwickeln?
Dann ist dieser Kurs genau das Richtige für dich.
Dies ist einer der modernsten und umfangreichsten Kurse zum Thema fortgeschrittenes CSSauf Udemy. Schritt für Schritt lernst du nicht nur die Grundlagen von CSS, sondern auch alle modernen CSS-Features - inklusive diverser CSS-Tricks, mit denen du als Webentwickler noch effizienter wirst.
Hierbei lernst du alles komplett praxisorientiert und am Beispiel - das Projekt, was wir in dem Kurs entwickeln, kann sich echt sehen lassen. Auch entwickeln wir interaktive Features wie ein ausfahrbares Seitenmenü, Buttons die weiteren Inhalt aufklappen, und einen Dialog, der sich animiert über die Seite legt - und zwar ohne dass für diese Funktionalität JavaScript im Browser benötigt wird.
Dieser Kurs hört fängt dort an, wo andere HTML-Kurse aufhören:Hier lernst du keine HTML-Grundlagen, sondern wir gehen hier explizit auf modernes CSSein - bis an die Grenzen des technisch machbaren.
Nach Abschluss dieses Kurses...
... bist du ein gefragter Webentwickler, der auch komplexeste Designs souverän umsetzen kann
... hast du ein umfangreiches Verständnis, wie CSS"unter der Haube" funktioniert
... bist du derjenige, der auch noch so komplexe Layouts problemlos umsetzen kann
... kannst du Designs entwickeln, die nicht nur auf Desktop- sondern auch auf Mobilgeräten gut aussehen (Responsive Design)
... behältst du dank SASSauch bei riesigen Projekten noch den Überblick
Was lernst du alles in diesem Kurs?
CSS Grundlagen:Vererbung, Spezifität, Cascading
Responsive Design:Desktop-first vs. Mobile-first
Gradients:Erstelle schicke Farbverläufe, als Hintergrundbild oder als Schriftfarbe
Animationen:Erstelle schicke Animationen, als Hover-Effekt oder als @keyframes-Animation. Inklusive diverser Tricks, damit deine Animationen immer flüssig dargestellt wird
3D-Effekte:Erstelle noch schickere Animationen, und bewege Elemente im 3D-Raum
Flexbox:Platziere Elemente nebeneinander - sehr viel eleganter als mit einem "float:left"
CSS-Grid:Platziere Elemente automatisch in einem Grid - ideal für Responsive Design
Positionierung von Elementen: Oft müssen wir mehrere Elemente übereinander legen, z.B. um ein Bild von Text überlagern zu lassen. Lerne alles, was du hierzu wissen musst!
Diverse CSS-Tricks:
Interaktive Menüs
CSS debuggen
SASS:
Strukturiere deinen CSS-Code so, dass du auch bei größeren Projekten noch den Überblick behältst
Variablen
Mixins
Farben abändern (sass:color)
Entwickle ein komplettes Praxisprojekt von A-Z
