### 1. Inspiration

YouTube Channel:

• Complete Responsive Websites
• Creative CSS Animations
• Hover Effects
• Vanilla JS Projects
• Creative UI/UX Design

🔗 Online Tutorials

Sites awarded for design, creativity and innovation. A great solution to seek inspiration:

🔗 Awwwards

Snippets to use in your projects, there are several examples at:

• HTML ou Pug
• CSS ou SASS, LESS, Stylus
• Bootstrap
• JavaScript e JQuery
• React e Vue

🔗 Free FrontEnd

────────────────────────────────────────────────────────

### 2. Icons & Material UI

Free SVG icons for popular brands

🔗 Simple Icons

More than 5000 Line Icons for Designers and Developers:

🔗 Line Icons

Simple and clean SVG icon pack with the code to support Rails, Sprockets, Node.js, Gulp, Grunt and CDN:

🔗 Evil Icons

One library, over 100,000 vector icons. Modern replacement for icon fonts. Fast, easy to use.

🔗 Iconify Design

────────────────────────────────────────────────────────

### 3. Illustrations

Awesome free customizable illustrations for your next project.

Customize, animate and download illustrations to make incredible landing pages, app or presentations:

🔗 Storyset

Free 3D illustration pack for web & mobile app designers:

🔗 Free 3D Illustrations

Build your own amazing illustrations. Using awesome gradients and hand drawn sketch components:

🔗 IRA Design

Free illustrations with custom colors:

🔗 unDraw

Kit with over 100 free illustrations:

🔗 Illustrations

────────────────────────────────────────────────────────

### 4. Colors Palette

Color Palettes for Designers and Artists. A wide variety of core palettes to use in web applications:

🔗 Color Palettes

Curated colors in context. Color palette that suggests colors to be used in specific elements:

🔗 Happy Hues

Take a hex color you want to use in a project and paste it on this site and this will generate some color palettes based on the one you selected:

🔗 ColorSpace

This site randomly generates a background and a color that contrasts with that background:

🔗 Randoma11y

────────────────────────────────────────────────────────

### 5. Gradients

Free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 crossbrowser code and use it in a moment:

🔗 Fresh Background Gradients

Free svg background generator for your websites, blogs and app:

🔗 BGJar

Make random, unique, and organic-looking SVG shapes:

🔗 Blobmaker

Make some waves SVG shapes:

🔗 Get Waves

────────────────────────────────────────────────────────

### 6. Code Builder & Snippets

Creative border-radius, when creating it is possible to copy the code to use our projects:

🔗 Fancy Border Radius

Tailwind CSS blocks and components ready to copy paste on your next project:

🔗 wickedblocks

Short code snippets for all your development needs:

🔗 30 Seconds Of Code

Collection of cheatsheets:

🔗 Devhints

Code generators to help you with your front-end web projects:

🔗 Web Code

Flexbox playground and code generator:

🔗 Flexy Boxes

CSS Grid Generator:

🔗 CSS Grid Generator

Another CSS Grid Generator:

🔗 Interactive CSS Grid

────────────────────────────────────────────────────────

### 7. Games

Train your Grid Layout skills by taking care of a vegetable garden:

🔗 Grid Garden

Train your FlexBox skills by placing frogs on water lilies:

🔗 FlexBox Froggy

I hope the content is useful :)