Fortgeschrittenes CSS: Animationen, Flexbox, SVG, 3D, SASS,…

Description

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 CSS auf 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 CSS ein - 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 SASS auch 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

TAKE THIS COURSE