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 |
Blogs and Magazines
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 |
Courses
Link | Comments | Tags |
---|---|---|
Coding for Designers | Demystifying Code and Learning JavaScript | Coding , Course |
Design Tools
Link | Comments | Tags |
---|---|---|
Visbug | Open source browser design tools | Design , Tool |
Resources for designers | The Best Curated Resources for designers | Design , Tool |
Dev Tools
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 |
Palette Colors
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 |
CSS
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 |
CSS Layout Generator
Link | Comments | Tags |
---|---|---|
CSS Grid Generator | CSS Grid Generator | CSS , Course |
Design Systems
Link | Comments | Tags |
---|---|---|
Storybook | Design Systems for Devs | Design Systems , Course |
DS Engineering | The complete guide about design systems: Engineering | Design Systems , Article |
Free Games
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 |
SVG Intro
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 |
SVG Tools
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 |
SVG Filters
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 |
SVG Generators
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 |
Icons
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 |
Focus Time
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 |
Codepen Collections
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 |
People you should follow on 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 |