ebsites, die jeder CSS-Entwickler kennen sollte

In diesem Beitrag teile ich 5 Websites, die Sie als CSS-Entwickler kennen sollten.

Lasst uns gleich loslegen!?

CSSnippets

CSSnippets ist eine großartige Website, die nützliche Code-Snippets für HTML, React, CSS und Tailwind CSS sammelt. Es verfügt über vorgefertigten Code für Dinge wie Schaltflächen, Feldschatten, Karten, Kontrollkästchen, Dropdowns und mehr. Entwickler können diese Snippets schnell kopieren und sparen so Zeit, da sie nicht immer wieder denselben Code schreiben müssen.

Warum es wichtig ist:

• Schneller Zugriff auf nützliche Snippets: Sie finden gebrauchsfertigen Code für gängige Komponenten wie Schaltflächen, Karten und Dropdowns.
• Verschiedene Kategorien: Die Website organisiert Snippets in Kategorien wie Formulare und Navigationsleisten, sodass Sie leicht finden, was Sie brauchen.
• Regelmäßig aktualisiert: Die Website fügt ständig neue Snippets hinzu, um sicherzustellen, dass Sie immer über die neuesten Trends und Techniken in CSS informiert sind.

CSS-Tricks

CSS-Tricks ist eine der besten Ressourcen zum Erlernen von CSS. Es wurde vom Webdesigner Chris Coyier erstellt und enthält zahlreiche Tutorials, Tipps und Anleitungen, die Entwicklern aller Erfahrungsstufen helfen.

Warum es wichtig ist:

• Ausführliche Artikel: Sie finden Tutorials, die sich mit Themen wie CSS Grid, Flexbox und Responsive Design befassen und sowohl grundlegende als auch fortgeschrittene Konzepte im Detail erklären.
• Interaktive Beispiele: Auf der Website können Sie mit Code in Ihrem Browser experimentieren, um Änderungen in Echtzeit zu sehen.
• Community-gesteuert: CSS-Tricks hat eine starke Community und seine Foren sind ein großartiger Ort, um Fragen zu stellen, Lösungen auszutauschen und mit anderen Entwicklern zusammenzuarbeiten.

Kann ich verwenden

Da sich CSS weiterentwickelt, ist es wichtig sicherzustellen, dass die von Ihnen verwendeten Stile von allen gängigen Browsern unterstützt werden. Kann ich verwenden ist eine Website, die Ihnen zeigt, ob eine CSS-Funktion von allen gängigen Browsern unterstützt wird.

Warum es wichtig ist:

• Browser-Kompatibilitätsprüfung: Geben Sie eine beliebige CSS-Eigenschaft oder -Funktion ein, und „Can I Use“ zeigt ein detailliertes Diagramm an, das angibt, welche Browser es unterstützen, sodass Sie fundierte Entscheidungen über die Verwendung bestimmter Eigenschaften treffen können.
• Echtzeit-Updates: Die Website wird regelmäßig aktualisiert, um die neuesten Änderungen in der Browserunterstützung widerzuspiegeln.
• Hilft bei der progressiven Verbesserung: Es hilft Ihnen, sicherzustellen, dass Ihre Website für alle funktioniert, auch für diejenigen, die ältere Browser verwenden.

CodePen

CodePen ist ein Online-Code-Editor, mit dem Sie HTML, CSS und JavaScript schreiben können. Es eignet sich hervorragend, um mit Code zu experimentieren und die Ergebnisse sofort zu sehen.

Warum es wichtig ist:

• Echtzeit-Feedback: Sie können die Auswirkungen Ihrer CSS-Änderungen sofort im Browser sehen, was ihn zu einem hervorragenden Werkzeug zum Experimentieren mit neuen Stilen oder zum Debuggen macht.
• Große Community: CodePen hat eine große Community von Entwicklern, die ihre Projekte teilen. Sie können jede Menge Inspiration für Ihre eigene Arbeit finden.
• Ideal, um Ihre Arbeit zu präsentieren: Sie können Projekte erstellen und vorführen, was sich perfekt zum Aufbau Ihres Portfolios eignet.

Flexbox Froggy

Flexbox Froggy ist ein interaktives Spiel, das Ihnen hilft, CSS Flexbox zu lernen und zu beherrschen. Das Spiel fordert Sie heraus, Frösche und Seerosenblätter mithilfe der Flexbox-Eigenschaften auszurichten. Es ist eine unterhaltsame und ansprechende Möglichkeit, praktische Erfahrungen mit diesem leistungsstarken Layoutsystem zu sammeln.

Warum es wichtig ist:

• Praktisches Lernen: Das Spiel präsentiert Szenarien, in denen Sie Flexbox-Eigenschaften anwenden müssen, um Frösche in die richtigen Positionen zu bewegen, und bietet so praktische Erfahrungen in einer unterhaltsamen Umgebung mit geringem Druck.
• Progressiver Schwierigkeitsgrad: Mit zunehmendem Fortschritt werden die Herausforderungen komplexer, sodass Sie ein tiefes Verständnis für die Funktionsweise von Flexbox entwickeln können.
• Kostenlos und zugänglich: Diese spielerische Website macht das Erlernen von Flexbox für jeden zugänglich, egal ob Sie Anfänger sind oder Ihre Fähigkeiten auffrischen möchten.

Abschluss

Der CSS-Entwicklungsprozess ändert sich täglich, aber mit den richtigen Tools und Ressourcen sind Sie auf dem besten Weg, der Konkurrenz einen Schritt voraus zu sein. Websites wie CSSnippets, CSS-Tricks, Can I Use, CodePen und Flexbox Froggy bieten alles von Code-Snippets und Tutorials bis hin zu Browser-Kompatibilitätsprüfungen und sogar interaktivem Lernen. Die Verwendung dieser Websites in Ihrem Workflow wird Ihnen helfen, intelligenter zu arbeiten und Ihre CSS-Kenntnisse weiter auszubauen.

Das ist alles für heute.

Ich hoffe, es war hilfreich.

Danke fürs Lesen.

Hier sind 42 weitere CSS-Tipps und Tricks für Entwickler.

Für weitere Inhalte wie diesen klicken Sie hier.

Folgen Sie mir auf X (Twitter), um tägliche Tipps zur Webentwicklung zu erhalten.

Codieren Sie weiter!!

Schauen Sie sich CSS Scan an, eine Browsererweiterung, mit der Sie den Code für jedes CSS-Element aller Websites im Internet extrahieren können. Klicken Sie hier, um 25 % Rabatt auf CSS Scan zu erhalten.

Das obige ist der detaillierte Inhalt vonebsites, die jeder CSS-Entwickler kennen sollte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!