Free Front End Development Resources for Everyone!

Front end development is hard if you’re not a designer. This list is a collection of tools that will help you speed up your front end workflow as a non front end guy. Lets make front end easy again!

Table of Contents

1. Color palette
2. Design practices
3. Iconography
4. Typography
5. Animations & Effects
6. Photos & videos
7. Illustrations
8. Utilities

Color Palette

• Parametric colormixer - Generate your palette
• Css gradient - Beautiful gradients
• Colorsinspo - Pre made color palettes
• Color Hexa - Learn more information about colors
• Color Space - Generate nice color palettes, gradients, and matching color schemes

Design practices

• Design checklist - Best design practices to follow
• Design System Repo - Curated list of designs for inspiration
• SaaS Landing Page - SaaS landing page inspirations

Iconography

• IconStore - free vector icons by designers
• Simple Icons - free dev logo icons
• Tilda icons - icons for landing page
• Ikonate - customisable & accessible vector icons.
• CSS Icons - 700+ CSS icons
• Eva icons - more than 480 beautifully crafted Open Source icons
• Animated icons - 400 free animated icons

Typography

• Google fonts - For all kinds of fonts
• Type Scale - Preview and choose the right type scale for your project.
• Fontjoy - Generate font combinations with deep learning

Animations & Effects

• Smooth shadow generator
• CSS effects snippets
• CSS separator genrator
• Animista - Create your own animations

Photos & Videos

• coverr.co - background videos
• Mixkit - video, music, templates
• pexels- stock photo, videos
• Photo creator - create own stock photos
• Unscreen - remove video backgrounds
• remove.bg - remove image backgrounds
• Generated photos - use AI generated faces
• Duotone (Shapefactory) - Contrast your images to two colors

Illustrations

• Open peeps - Hand drawn illustration library
• Smash illustrations - Free mix and match illustration constructor
• Open doodles - Sketchy illustration collections
• Avataaars generator - Generate cartoon avatars
• Faux code genarator - Turn real code to faux code

Utilities

• AI Image Upscaler - use AI to upscale image
• App Launch Pad - Put your image on computers, tabs and mobiles
• Artboard studio - Create product mockups
• Mockuper - Create view mockups with MAC viewports

References

This list has been made by copying shamelessly from the following lists:

1. https://dev.to/deavidepacilio/
2. https://dev.to/vaibhavkhulbe/
3. github.com/bradtraversy/design-resources-for-developers. This is a complete list of every free thing for designing)

Sharing is caring!