Skip to content

Latest commit

 

History

History
237 lines (182 loc) · 17.4 KB

README.md

File metadata and controls

237 lines (182 loc) · 17.4 KB

cosmic red cover image

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 Adam Argyle avatar CSS, Animation
Amelia Bellamy-Royds Amelia Bellamy avatar SVG, CSS, Animation
Ana Tudor Ana Tudor avatar Animation, Canvas, Sass, Javascript
Cami Williams Cami Williams avatar CSS
Cassie Evans Cassie Evans avatar CSS, Animation, GSAP, SVG
Cassidy Williams Cassidy Williams avatar CSS, Animation
Chris Coyier Chris Coyier avatar SVG, CSS, Animation, Javascript
Chris Gannon Chris Gannon avatar SVG, Animation, GSAP
Christina Gorton Christina Gorton avatar SVG, Animation, GSAP, CSS
Eva Santos Eva Santos avatar Animation, CSS, SVG, Javascript
Joan León Joan León avatar Animation, CSS, SVG, Javascript
Julia Muzafarova Julia Muzafarova avatar Animation, CSS
Lea Rosema Lea Rosema avatar WebGL, GLSL, SVG, Canvas, CSS
Mandy Michael Mandy Michael avatar CSS, Effects, Animation
Noel Delgado Noel Delgado avatar Animation, Canvas, CSS, SVG
Rachel Bull Rachel Bull avatar CSS, Animation
Rachel Nabors Rachel Nabors avatar Animation, CSS, SVG, WAAPI
Rachel Smith Rachel Smith avatar Animation, Canvas, SVG, Particles, WebGL
Sasha Tran Sasha Tran avatar CSS, SVG, Animation
Sara Soueidan Sara Soueidan avatar SVG, CSS, Animation
Sarah Drasner Sarah Drasner avatar Animation, SVG, Javascript, GreenSock, GSAP, Canvas
Sarah Fossheim Sarah Fossheim avatar CSS, Animation
Val Head Val Head avatar Animation, CSS, SVG, P5.js, GreenSock
Yuán Chuān Yuán Chuān avatar SVG, CSS, Animation, GreenSock, Javascript

Carmen Ansio | @carmenansio