This article is stacked with curated lists of essential tools and resources every developer should consider having in their tool box. As a developer you want to be more productive and focus on what matters, you ought to be cautious of what you put up in your website as proper aesthetics is a core design principle that defines a design's pleasing qualities.

COLLECTION OF TOOLS AND RESOURCES

• Stock Images/Videos
• Illustration
• Fonts
• Colors
• Logos
• Image Manipulators
• Icon Fonts
• HTML & CSS Templates
• Animation
• JavaScript Chart Library
• Design Inspirations
• Guides
• Challenges
• Hosting

STOCK IMAGES/VIDEOS

Top websites that offer free and premium stock images and videos;

1. Unsplash.com | Internet’s choice for free cool images
2. Pexels.com | Full of stock images and videos shared by creative artist
3. Pixabay.com | 1.5 million+ high quality of stock images and videos
4. Coverr.co | Amazing free stock video footage
5. Mixkit.co | Free HD clips and music

ILLUSTRATIONS

These websites are great for modern UI graphics in different formats such as PNG, SVG, GIF etc.

1. Undraw.co | Designer’s best choice
2. Drawkit.co | Illustrations for designers and developers
3. Animations.co | Assorted illustrations for any idea
4. Blush.design | Free customizable illustrations with Figma Plugin
5. Uplabs.com | Free and premium of high quality design resources

FONTS

Websites that offer cool and free fonts.

1. Fonts.google.com | Library of over 1000+ free licensed font families, developer’s best choice
2. DaFont.com | Free downloadable fonts
3. Usemodify.com | Beautiful fonts
4. FontGet.com | Variety of fonts ready for use.
5. FontPair.co | Helps you pair Google Fonts

COLORS

Choosing colors can be problematic right?

1. CSSgradients.io| Free tool for creating mixed CSS Gradients
2. Coolors.co | Cool and beautiful color palette
3. HTMLColorCodes.com | Get your HTML color codes, Hex color codes etc
4. PaletteList.com | Pick 2 colors you find interesting and the tool generates thousands of palettes for you.
5. Color.Adobe.com | Create color palettes, extract gradients from images etc.

LOGOS

Beautiful logo stands out, tools and resources for logos

1. LogoSear.ch | Over 200k+ SVG indexed logos.
2. SVGPorn.com | Cool SVG logos
3. InstantLogoSearch.com | Free SVG, PNG logos
4. LogoMakr.com | Create custom logo at a go
5. Logo.wine | Free downloadable logos in SVG, Vector, PNG format etc.

IMAGE MANIPULATORS Edit, resize, compress, optimize and remove background images.

1. Compressor.io | JPEG, PNG, GIF, SVG Compression
2. CompressNow.com | Image compression.
3. Resizing.app | Online tool for image resizing
4. Remove.bg | Cut out unwanted background from your photos
5. ImageOptimizer.net | Free quality image optimizer

ICON FONTS

Resources for Icon Fonts

1. FontAwesome.com | Web most popular icon set and toolkit
2. Boxicons.com | Carefully crafted open source icons
3. Icofont.com | Over 2000+ free icons to spice up your creative mind
4. Devicon.com | Icons like programming languages, for designing and development tools.
5. Jam-icons.com | Sleek icons to make your web app beautiful

HTML & CSS TEMPLATES

Popular websites that offer stunning looking free and modern website templates and themes.

1. FreeHTML5.co | Free and Premium HTML5 and Bootstrap themes
2. Zerotheme.com | Elegant HTML5, Bootstrap templates
3. Tooplate.com | Free HTML templates
4. HTMLrev.com | Free HTML landing pages templates
5. W3Layouts.com | 4000+ Free responsive templates

ANIMATION

Popular CSS and JavaScript animation resources/library for your next project.

1. Animate.css | Water CSS Animation
2. Bounce.js | Bounce.js is a JavaScript library that lets you create sleek and modern CSS3 animations.
3. Anime.js | A lightweight JS animation library with a simple, yet powerful API, works with CSS properties, SVG, DOM.
4. GSAP | GSAP is a wonderful JavaScript animation library - personally have used it in one of my project. I recommend.
5. Three.js | Lightweight, awesome and easy to use.

JAVASCRIPT CHART LIBRARY These libraries will transform your data into charts.

1. ChartJS | Powerful, simple yet flexible.
2. ApexCharts.js | Interactive open-source charts.
3. Chartist | Responsive chart library.
4. FrappeJS | Implement Github like green squares grid.
5. Vizzu | An open-source JavaScript library for building animated charts, interactive explorers and data stories.

DESIGN INSPIRATIONS

Want to start that new project but struggling to come up with an idea? We all have been there. Don’t panic, these websites got you covered.

1. Behance.net | Behance is filled with talented designers.
2. Dribbble.com | You would love what you will see, I promise.
3. Landingfolio.com | Landingfolio features one of the best landing page inspiration, templates and resources on web.
4. Awwwards.com | A website that features and rates the best websites in the world of UI.
5. FreeFrontend.com | Discover elegant designs made from HTML, CSS and JavaScript.

GUIDES

What is a developer’s life without bugs? - These websites are on a rescue mission.

1. MDN | The MDN Web Docs has great resources for developers.
2. YouTube.com | With the likes of Brads, Net Ninja, Max, I guarantee you will find suitable solution.
3. Geeksforgeeks.org | Millions of articles contributed by awesome developers.
4. FreeCodeCamp.org | FCC is an online community forum, thousands of videos, articles, and interactive coding lessons.
5. Hashnode.com | Hashnode features talented developers with top-notch articles and guides.

CHALLENGES

Level up your problem-solving skill by solving challenges on these websites.

1. LeetCode.com | Enhance your algorithm skills and prepare for your interviews.
2. Hackerrank.com | Practice coding skills, prepare for interviews and get hired.
3. Codewars.com | A community of over 3 million developers, improve your coding skills in over 55 programming languages.
4. FrontendMentor.io | Polish your front-end skills by building real projects. Solve JavaScript challenges whilst working on professional designs.
5. FreeCodeCamp.org | Amazing learning platform, skill up and get certified.

HOSTING

Finished that project and can’t wait to show it to the world?

1. Netilify.com | Take your website online with this safe and secure platform.
2. Vercel.com | Develop, preview and ship.
3. GitHub Pages | Free, fast and reliable tool to showcase your websites to the world.
4. Firebase | Deploy your web page instantly with Google’s Firebase.
5. Codepen.io | Build and deploy a website, show off your work.

Conclusion

Here, we draw the curtain for today, until next time.

Thanks for reading - and if you have any questions/suggestions, kindly leave them in the comments section below, and I'll be glad to answer every single one.