14 grundlegende CSS-Kurse

Wenn Sie ein erfolgreicher Webdesigner sein möchten, ist ein solides Verständnis von CSS ein Muss. Glücklicherweise haben wir einige Ressourcen, die Ihnen helfen, ob Sie nun die Grundlagen von CSS erlernen oder in fortgeschrittenere Bereiche expandieren möchten.

Hier finden Sie 14 umfassende Kurse, die Sie bei der Entwicklung Ihrer CSS-Kenntnisse unterstützen, von den Grundlagen der Positionierung und Typografie von CSS bis hin zur Verwendung von Pseudoelementen und dem Beherrschen von Sass.

1. Beginnen Sie hier: Lernen Sie CSS-Typografie

Wenn Sie ein aufstrebender Webdesigner sind und bereit sind, CSS zu lernen, dann beginnen Sie hier!

Wenn es eine Art von Styling gibt, die im Webdesign wohl wichtiger ist als jede andere, dann die Typografie. Idealerweise sollten Ihre Websites mit einer soliden Typografie beginnen, und der Rest des Designs sollte darauf aufbauen. Aus diesem Grund ist es wichtig, zuerst den typografischen Teil des Designprozesses zu verstehen. In diesem Kurs wird Envato Tuts + Instructor Kezz Bracey Sie auf den neuesten Stand bringen.

 

2. Beginnen Sie hier: Lernen Sie das CSS-Layout

Nachdem Sie im letzten "Start Here" -Kurs die Grundlagen der Typografie erlernt haben, können Sie mit dem nächsten grundlegenden Element des Webdesigns fortfahren: dem Layout.

In diesem Kurs erfahren Sie alles, was Sie wissen müssen, um die am häufigsten verwendeten Layouttypen im Webdesign zu erstellen.

 

3. Beginnen Sie hier: Lernen Sie CSS-Farben und -Hintergründe

In dieser Installation unserer "Start Here" -Serie werden Sie der von Ihnen erstellten Site mithilfe von CSS-Farben und -Hintergründen Leben einhauchen.

In diesem Kurs erfahren Sie alles über die visuellen Techniken, mit denen sich Websites von anderen abheben und das „Design“ in das Webdesign einbringen.

 

4. Ausschneiden und Maskieren in CSS

Das Ausschneiden und Maskieren von Bildern sind Konzepte, die Ihnen möglicherweise aus der Verwendung von Grafikanwendungen wie Photoshop bekannt sind. In diesem Kaffeepause-Kurs wird Adi Purdila Ihnen jedoch zeigen, wie Sie das Ausschneiden und Maskieren in CSS verwenden.

 

5. Das vollständige Handbuch zur CSS-Positionierung

CSS-Positionierung ist eine grundlegende Fähigkeit im Webdesign. es macht Layouts leistungsfähig und bildet somit die Grundlage für alles, was sich in diesen Layouts befindet. Das heißt, es kann ziemlich schwierig sein, den Kopf beim ersten Start umzudrehen.

Wenn Sie diesen Kurs abgeschlossen haben, haben Sie die wesentlichen Prinzipien, die Sie für Ihre Layouts benötigen, fest im Griff. Kezz Bracey zeigt Ihnen die vier verschiedenen Positionierungsarten, die in CSS verwendet werden, und zeigt, wie Sie einige der merkwürdigen Effekte umgehen können, die bei der Verwendung auftreten können.

 

6. 3 CSS-Rasterprojekte für Webdesigner

Das CSS-Rasterlayout ist ein W3C-Arbeitsentwurf, der ein leistungsfähiges Rastersystem definiert, das das Layout von Webseiten mithilfe von CSS vereinfacht.

In diesem Kurs werden Sie drei Projekte erstellen, um zu verstehen, was mit „Grid“ möglich ist. Der erste ist ein Anfänger-Level und führt Sie in die Gitterkonzepte ein. Die zweite Stufe nimmt die Dinge auf eine Stufe und untersucht Dinge wie Ausrichtung und Verschachtelung. Das letzte Projekt ist noch weiter fortgeschritten, wenn Flexbox in Kombination mit Grid verwendet wird. Nach diesen drei Projekten bis zur Fertigstellung mit Craig Campbell werden Sie vom Grid-Neuling zum überzeugten Grid-Benutzer geführt.

 

7. Wichtige CSS-Bibliotheken für Webdesigner

In diesem Kurs wird Ihnen Adi Purdila zeigen, wie Sie zehn grundlegende CSS-Bibliotheken für Webdesigner verwenden. Sie lernen Resets, Animationen, Übergänge und typografische Bibliotheken. Sie verwenden Bower zur Verwaltung Ihrer Projekte, um sicherzustellen, dass alles auf dem neuesten Stand bleibt und leicht zu warten ist.

 

8. Das CSS der Zukunft

CSS entwickelt sich ständig weiter. In diesem Kurs führt Craig Campbell Sie durch die brandneuen Funktionen von CSS, damit Sie auf dem Laufenden bleiben und die Nase vorn haben.

Einige der behandelten Funktionen könnten in naher Zukunft zum Mainstream werden, während andere wahrscheinlich in Vergessenheit geraten werden. Wenn Sie wissen, welche CSS-Selektoren, Layout-Module und Filter für die Zukunft in Betracht kommen, werden Sie zu einem stärkeren Front-End-Entwickler.

 

9. Raster und Layout-Tricks mit "postcss-ant"

In diesem Kurs lernen Sie, wie Sie eines der leistungsstärksten, aber sauberen und aufblasbaren Netzsysteme verwenden können, die derzeit verfügbar sind: postcss-ant. Es wurde von Cory Simmons erstellt, bekannt für seine beliebten Rastersysteme Jeet und Lost.

Postcss-ant läuft auf dem PostCSS-System und ermöglicht die problemlose und effiziente Verwaltung von Layouts vom einfachsten bis zum komplexesten mit Vanilla-CSS oder Ihrem bevorzugten Präprozessor. Kezz Bracey wird Sie in diesem Kurs auf den neuesten Stand bringen.

 

10. Erkunden von CSS-Pseudoelementen

Oberflächlich betrachtet scheinen Pseudo-Elemente nichts weiter als eine nützliche Teilmenge von CSS zu sein. In diesem kurzen Kurs mit Craig Campbell werden Sie jedoch feststellen, dass das Beherrschen von Pseudo-Elementen Ihnen wirklich dabei helfen kann, Ihre Entwürfe auf die nächste Stufe zu bringen.

 

11. Praktische Webanimation

Die Zeiten der animationsintensiven Websites verblassen, aber es ist immer noch etwas zu sagen für eine Website mit kleinen, subtilen, auffälligen Bewegungen, die den Benutzern helfen, Schnittstellen zu interpretieren. In diesem Kurs zeigt Craig Campbell praktische Möglichkeiten zum Erstellen von Animationen für Schaltflächen, Preistabellen und andere Webelemente. Dazu verwenden Sie kurz CSS und jQuery.

 

12. Werde ein CSS-Superheld mit Stift

Stylus ist einer der drei führenden CSS-Präprozessoren, der CSS einfacher und leistungsfähiger als je zuvor macht und die Liga mit Sass und LESS teilt. In Stylus CSS Superhero lernen Sie, wie Sie Code schneller schreiben als ein Aufzählungszeichen, Layoutfunktionalität erstellen, die leistungsfähiger als eine Lokomotive ist, und ganze Farbschemata in einer einzigen Bindung aktualisieren. Treten Sie Kezz Bracey bei und beginnen Sie mit Ihrem Superheld-Training!

 

13. 6 Flexbox-Projekte für Webdesigner

Das CSS-Flexbox-Modell wird zunehmend breiter eingesetzt und wird nun in allen gängigen Browsern unterstützt. In diesem Kurs baut Craig Campbell auf seinen CSS: Flexbox Essentials-Kurs auf, in dem er sechs praktische CSS-Projekte für den täglichen Gebrauch erläutert.

 

14. 14 Tage, um Sass zu lernen

In diesem Kurs mit Adi Purdila lernen Sie in 14 Tagen die Grundlagen von Sass. Jeden Tag lernen Sie etwas Neues und Sie erhalten eine kleine Übung, mit der Sie Ihr Wissen festigen können. 

Dieser Kurs ist für Anfänger gedacht, Sie benötigen also keine Vorkenntnisse mit Sass, Sie benötigen jedoch Erfahrung mit CSS, da Sass eine Erweiterung des Kurses ist.

 

Sehen Sie sich jetzt jeden Kurs an

Sie können jeden unserer Kurse sofort mit einem Abonnement von Envato Elements besuchen. Für eine geringe monatliche Grundgebühr erhalten Sie nicht nur Zugang zu diesen Kursen, sondern auch zu unserer wachsenden Bibliothek mit über 1.000 Videokursen und branchenführenden eBooks für Envato Tuts+. 

Darüber hinaus erhalten Sie jetzt unbegrenzte Downloads aus der riesigen Envato Elements-Bibliothek mit mehr als 200.000 Fotos und 26.000 Design-Assets und Vorlagen. Erstellen Sie mit einzigartigen Schriftarten, Fotos, Grafiken und Vorlagen und sorgen Sie schneller für bessere Projekte.