Hello! Welcome to my list of some of my favorite tools/websites that I use while doing frontend development. If you have any suggestions to tools that you use, you can leave a comment to spread the word!
A lot of these helped me as a freelance developer, where sometimes I would be designing the site myself. Even if you're not a freelance developer, if you ever have to design your own website, like your personal portfolio, there are a lot of sites here that will help.
1 - Realtime Colors
This is a classic, I'm sure a lot of readers know about this one. This tool is not only great for testing out a color scheme on a "live" site, but it's excellent for getting feedback from clients.
When you set the colors (and the fonts, too!), they are saved in the URL search params, so you can easily share that link with other people, like your client. I will often refer clients to this tool if they want to play with colors/fonts, and have them send me the link to that configuration after.
2 - Smooth Shadow
Smooth Shadow is a very easy-to-use tool that generates the CSS for a shadow. It is very customizable, and also has a Figma plugin!
3 - Haikei
An SVG generator that comes with a lot of unique and fun options, all very customizable! This is an excellent tool for creating backgrounds that you can fine-tune.
4 - shadcn-ui
Most people probably already know about shadcn, a very popular component library, but I had to add it. I love how each component is so easily customizable, and of course it fits perfectly with my Next.js + TypeScript Tailwind setup.
When you initialize shadcn into your project, it will also install the next item on the list:
5 - Lucide.dev
This package of 1400+ icons is my go-to, they're simple, free, and easy to implement in my projects. You can easily change the size and color of the icons with Tailwind, as well.
Fun fact, Lucide is powered by Vercel.
Another great icon library is Font Awesome.
6 - unDraw
By Katerina Limpitsouni
unDraw is another popular one (I believe), but it has a lot of great, open-license illustrations that you can use in your website for free!
8 - Sketchfab
Sketchfab is a cool site where you can download a lot of free (and some expensive) 3D models. I used some of them in my previous portfolio, rendering them with Three.js.
Do be aware that almost all of the assets will require some type of attribution, at the very least.
9 - Huemint
Huemint is an awesome tool for creating and visualizing color schemes. Using this alongside Realtime Colors is great for coming up with the colors for your site!
10 - Divmagic
Divmagic is a Chrome/Firefox extension that's a very useful tool for getting the code of any website! Very useful for getting code inspiration from other sites that you like.
Thanks for reading!
Thanks for reading! If you have any other tools/websites you'd like to share, leave them in the comments!