Bookmarks that I ❤️
| Blogs and Magazines | Courses | Design Tools | Dev Tools | Palette Colors | CSS | CSS Layout Generator | Design Systems | Free Games | SVG Intro | SVG Tools | SVG Filters | SVG Generators | Icons | Focus Time | Codepen Collections | People you should follow on codepen |
| Link | Comments | Tags |
|---|---|---|
| Smashing Magazine | Cool articles for improving design and development skills | Animation, SVG, Javascript, GreenSock, GSAP, Newsletter |
| CSS Tricks | Keep up to date on webdev with articles and guides | Animation, SVG, Javascript, GreenSock, GSAP, Newsletter |
| CSS In Real Life | Tips, tricks and tutorials on the web’s most beautiful language | CSS, Animation, Accessibility |
| Modern CSS | Modern CSS Solutions for Old CSS Problems | CSS, Animation, WebDev, SVG, Javascript |
| Frontend Horse | Learn frontend development tricks from some of the web’s best creative developers | CSS, Animation, WebDev, Articles, Newsletter |
| Hey Designer | Daily curated design knowledge | CSS, Animation, Design, SVG |
| Link | Comments | Tags |
|---|---|---|
| Coding for Designers | Demystifying Code and Learning JavaScript | Coding, Course |
| Link | Comments | Tags |
|---|---|---|
| Visbug | Open source browser design tools | Design, Tool |
| Resources for designers | The Best Curated Resources for designers | Design, Tool |
| Link | Comments | Tags |
|---|---|---|
| Wappalyzer | Find out the technology stack of any website | Development, Tool |
| Chrome DevTools | Record panel | Development, Tool |
| Create Figma plugins | How to develop Figma plugins | Development, Tool |
| What devs need | Tools Collection | Development, Tool, Collection |
| DevDocs | DevDocs combines multiple API documentations in a fast, organized, and searchable interface | Development, Tool, Collection |
| Toolhunt | Quality devtools that are changing the game | Development, Tool, Collection |
| Link | Comments | Tags |
|---|---|---|
| Scale | A generative way to create color scales | Design, Tool, Color |
| cccolor | cccolor a clean & simple color picker for web designers | Design, Tool, Color |
| Link | Comments | Tags |
|---|---|---|
| Learn CSS | Learn with web.dev | CSS, Course |
| Layout Patterns | Snippets in CSS | CSS, Course |
| CSS Layout | Popular layouts and patterns made with CSS | CSS, Snippet |
| CSS background patterns | A collection of 100+ free css patterns | CSS, Patterns |
| CSS Animations | CSS animations course | CSS, Animations, Learn, Course |
| CSS Triggers | CSS triggers | CSS, Performance |
| CSS Gradient | CSS Gradient is a happy little website and free tool that lets you create a gradient background for websites | CSS, Generator |
| CSS Keyframes | Create basic or complex CSS @keyframe animations with a visual timeline editor similar to video-editing software | CSS, Animations, Learn, Course |
| CSS Button Generator | Create CSS Buttons with this tool | CSS, Tool |
| Link | Comments | Tags |
|---|---|---|
| CSS Grid Generator | CSS Grid Generator | CSS, Course |
| Link | Comments | Tags |
|---|---|---|
| Storybook | Design Systems for Devs | Design Systems, Course |
| DS Engineering | The complete guide about design systems: Engineering | Design Systems, Article |
| Link | Comments | Tags |
|---|---|---|
| CSS Selectors | Learn CSS Selectors | CSS, Game, Learn |
| Cant Unsee | Select the design that is most correct | UI, Game, Learn |
| CSS Grid Garden | Learn CSS Grid with this game where you write CSS code to grow your carrot garden | UI, Game, Learn, Layout |
| Flexbox Froggy | Learn Flexbox with this game where you help Froggy and friends by writing CSS code | UI, Game, Learn, Layout |
| Link | Comments | Tags |
|---|---|---|
| Alligator | Where to get started with SVG and our curated list of resources | Animation, SVG, CSS, Learn |
| CSS Tricks | Everything You Need To Know About SVG | Animation, SVG, CSS, Learn |
| I hate tomatoes | A list of useful SVG resources, that helped me while learning how to create, export, optimize, embed and animate SVGs | Animation, SVG, CSS, Learn |
| MDN | This tutorial aims to explain the internals of SVG and is packed with technical details | Animation, SVG, CSS, Learn |
| Dev Docs | Getting Started with SVG | Animation, SVG, Learn |
| SVG on the web | SVG on the Web a Practical Guide | Animation, SVG, CSS, Learn |
| Cubic Bezier | A better tool for cubic-bezier() easing | Animation, SVG, CSS, Tool |
| Link | Comments | Tags |
|---|---|---|
| SVG Artista | Super handy SVG drawing tool | Animation, SVG, Javascript |
| Animista | Animista is a place where you can play with a collection of pre-madre CSS animations | Animation, SVG, Javascript |
| SVG path visualizer | Enter an SVG path data (the string inside the d attribute) to visualize it and discover all its different commands | Animation, SVG |
| Essential SVG tools | Article with SVG tools explained | Animation, SVG |
| Image to SVG | A PWA to convert raster images to SVG vector graphics | SVG |
| SVG to React | SVGR let you transform SVG into React components everywhere | SVG |
| Warp SVG | A simple online tool that allows you to warp, bend, and distort SVG files | SVG |
| SVG editor | Online SVG editor | SVG, Tool |
| Link | Comments | Tags |
|---|---|---|
| SVG filters | Learn how you can use the powerful SVG filter primitive | SVG, CSS, Effects |
| SVG Animated text fills | A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG | SVG, CSS, Effects, Animation |
| SVG Animated text fills Demos | SVG text with animated dashed stroke pattern | SVG, CSS, Effects, Animation |
| Link | Comments | Tags |
|---|---|---|
| bbburst | SVG generator for confetti-like explosions of shapes | Animation, SVG, Javascript |
| Pixel Art Generator | Draw your pixel art | Design, Tool |
| SVG Generator | Generate unique SVG design assets for websites | SVG, Tool |
| Hero Patterns | A collection of repeatable SVG background patterns for you to use on your web projects | SVG, Tool |
| SVG Waves | Generate SVG Waves | SVG, Tool |
| SVG Bg | Generate SVG Bg | SVG, Tool |
| SVG Backgrounds | Generate SVG Backgrounds | SVG, Tool |
| Link | Comments | Tags |
|---|---|---|
| SVG icons | Which SVG technique performs best for way too many icons? | SVG, icons |
| SVG sprites generator | Drop SVG files to create the Sprite | SVG, icons, sprite |
| Lordicons | Lordicon is a beautifully designed and animated icon set with a powerful library and endless integration options | SVG, icons |
| Iconoir | Iconoir is one of the biggest open source libraries with currently 974 SVG Icons | SVG, icons |
| Icon CSS | Open-source CSS, SVG and Figma UI Icons available in SVG Sprite, styled-components, NPM & API | SVG, icons, CSS |
| Heroicons | eautiful hand-crafted SVG icons, by the makers of Tailwind CSS | SVG, icons |
| Boxicons | Simple vector icons carefully crafted for designers & developers | SVG, icons |
| Link | Comments | Tags |
|---|---|---|
| Soundrop | You can use this tool to build a sound mix that will help you become more productive, focused, or relaxed | Music, Focus |
| Link | Comments | Tags |
|---|---|---|
| SVG inspiration | Workshop: Advanced SVG Animations by Sarah Drasner | SVG, Codepen |
| SVG animations | My Favorite SVG Animations by Sarah Drasner | SVG, Animation, Codepen |
| SVG resources | SVG Resources by Sarah Drasner | SVG, Animation, Codepen |
| Link | Avatar | Tags |
|---|---|---|
| Adam Argyle |  |
CSS, Animation |
| Amelia Bellamy-Royds |  |
SVG, CSS, Animation |
| Ana Tudor |  |
Animation, Canvas, Sass, Javascript |
| Cami Williams |  |
CSS |
| Cassie Evans |  |
CSS, Animation, GSAP, SVG |
| Cassidy Williams |  |
CSS, Animation |
| Chris Coyier |  |
SVG, CSS, Animation, Javascript |
| Chris Gannon |  |
SVG, Animation, GSAP |
| Christina Gorton |  |
SVG, Animation, GSAP, CSS |
| Eva Santos |  |
Animation, CSS, SVG, Javascript |
| Joan León |  |
Animation, CSS, SVG, Javascript |
| Julia Muzafarova |  |
Animation, CSS |
| Lea Rosema |  |
WebGL, GLSL, SVG, Canvas, CSS |
| Mandy Michael |  |
CSS, Effects, Animation |
| Noel Delgado |  |
Animation, Canvas, CSS, SVG |
| Rachel Bull |  |
CSS, Animation |
| Rachel Nabors |  |
Animation, CSS, SVG, WAAPI |
| Rachel Smith |  |
Animation, Canvas, SVG, Particles, WebGL |
| Sasha Tran |  |
CSS, SVG, Animation |
| Sara Soueidan |  |
SVG, CSS, Animation |
| Sarah Drasner |  |
Animation, SVG, Javascript, GreenSock, GSAP, Canvas |
| Sarah Fossheim |  |
CSS, Animation |
| Val Head |  |
Animation, CSS, SVG, P5.js, GreenSock |
| Yuán Chuān |  |
SVG, CSS, Animation, GreenSock, Javascript |