Das sind die 100 beliebtesten Code-Snippets auf Codepen

(Screenshot: codepen.io)
Codepen, die Plattform für begeisterte Entwickler aus den verschiedensten Bereichen. Eine Community zum austoben und inspirieren, für Profis sowie Anfänger. Codepen-Nutzer können ihre Arbeiten oder genauer gesagt den Code dahinter veröffentlichen, Test-Cases erstellen oder sich einfach nur inspirieren lassen. Kurz gesagt: Eine Plattform zum Frontend-Code schreiben und teilen.
Besonders die Inspiration kann oft eine echte Hilfe sein, denn durch den offen gelegten Code können zum Beispiel einzelne Snippets beliebig angepasst oder kopiert werden. In der Live-Preview werden Veränderungen in Echtzeit ausgegeben. Wer also auf der Suche nach Code für eine verrückte Animation ist, wird auf Codepen sicher fündig.
Die Code-Snippets nennen sich „Pens“ und können privat oder public sein. Codepen ist somit besonders für Berufseinsteiger eine geeignete Plattform zur Präsentation bereits absolvierter Projekte.
Die besten drei Pens aus 2017
Die Community hat die Möglichkeit „Pens“ anderer Nutzer zu bewerten oder kommentieren. Die Bewertung erfolgt meistens durch „Hearting“ – eine Art Like, nur wird nicht mit einem Daumen, sondern mit einem Herzen geliked. Jeder Nutzer kann einen Pen bis zu drei Mal bewerten.
Jetzt hat Codepen die Pens mit den meisten Herz-Bewertungen aus dem vergangenem Jahr zusammengefasst und veröffentlicht.
Auf Platz eins der Codepen-Auswertung ist das Werk vom Microsoft-Entwickler David. Mit seinem Pen „CSS Responsive House“ hat er die Community begeistert und konnte 1.681 Likes sammeln.
Den zweiten Platz gewinnt Giana mit ihrem „CSS-only directionally aware hover“ Pen. Je nachdem aus welcher Richtung gehovert wird, legt sich ein Overlay über die Bilder.
Mit 1.310 Likes gewinnt Fabio Ottaviani den dritten Platz. Sein Werk ist die „Split Slick Slideshow“. Durch eine sanfte Scroll-Animation teilt sich das Bild und scrollt zum nächsten.
Hier gelangt ihr direkt zur Übersicht der 100 ausgewählten Pens.
Das könnte euch auch interessieren:
- Die ultimative Frontend-Checkliste für Webdesigner
- 6 Webdesign-Trends, die ihr 2018 nicht verpassen solltet
Kann es sein, dass ihr die Reihenfolge vertauscht habt und euer Platz 1 in Wirklichkeit nur Platz 100 ist? ;)