I've read tons of resources collections.
So have you, I imagine.
This is why I am writing this, in the hopes it can actually help you with creating new quality stuff, quicker.
Because ‘better’ will always be a losing game for your brand.
You just need to be wiser while building, making more 💵 , and spending less ⏳ on it as a consequence.
So no bullshit here 💩.
✨ Let's go straight to the point ✨
If you like any of this, react with 💕 and I will make more
📦 Vercel
I can't recommend this enough. I also use Netlify, but changed to Vercel because the UI is slicker. It's free, you host your project in a few clicks, and it also gives you an SSL certificate, so you won't have the site not secured tag.
or Tiiny.host if you're prototyping. No registration, just drag the folder and it gives you a link. Up for 3 days and then it's gone.
🧪 Hoverify
This is paid but worth it. Cheaper than other ones ($18) and amazing. I use the color picker and grid system all the time when building something or just scrolling through a website, to see how the divs are positioned.
🎀 Csslayout.io
Never seen this one on other collections. Super good and fast code snippets for making layouts, navs, headers, etc. Shout-out to fellow Dev member phuocng who made this.
🔑 NiceVeryNice
This site itself is a compilation of really good resources. What I use the most is their Components part, where I often go to when looking for reference. Need to build a hero? Go there and check hero examples. I use it with Hoverify.
🧲 Paatern.css
This is something I only superficially used but I like it. Background and background-image patterns to add complexity to your designs.
🧷 Tabler Icons
Of all the thousands of icon provider websites, this is my favorite. It's all SVG, color, size and thickness customizable.
🔋 Tailwind CSS
Okay, this one is just because I love it. You probably already know it. Super easy building stuff with Tailwind. Its a utility-first, mobile-first CSS framework that's been ranking up on users recently. I share the hype.
🔮 Design Systems Repo
A project repo that counts with a giant list of design systems, style guides, and pattern libraries. Sometimes I just scroll here to see if I want to try something out of my comfort zone.
🎁 Treact
This is GOLD. I built a fully responsive, beautiful React website with it, so I know its good. He also uses Tailwind.
🚒 Tailblocks
By this point, you know I like Tailwind. I built a responsive personal portfolio in one hour with Tailblocks hosting it in Vercel. Very well structured and easy to use.
🎣 Open
Was a bit reluctant to put this one here, because it costs $49 and I never bought it. But I like the visuals and a friend of mine used it, so here it is.
⚾️ Web.dev
Always use this when finishing a website. It scores your SEO, accessibility, how fast it is, etc. Must check it out if you already didn't.
🎨 Projector
I think this one is fairly new. I use this to create quick presentations for my clients. You don't have to, but it feels nice not to just send your client their website link.
🧸 Public APIs
An amazing list of public APIs for using. This is huge and it's amazing how many different types of APIs there is to experiment with.
Top comments (49)
Thank you, Leonardo, for mentioning my site (tablericons.com)
Legend!
Good job on it 💯🙂
Thanks!
Hey Leonardo, thanks for sharing all those resources. I'm right now trying to enter on the Freelancer and my biggest pain is regarding deploying. Do you mind I reaching you out to ask a few questions? Living on the same city may help me quite a bit!
Thanks man!
Hey my dude!! Of course not, let’s chat. Dm me on twitter
Just followed you, hit me back so we can chat. Thanks man! @Henrique_Rulez
Should I use my personal Vercel account and host my client's websites there?
I am just starting with freelancing and I am trying to figure out how to do hosting.
I think Vercel is good because it also lets me buy domains and then continuously host through my github repo.
up
Dude that is awesome! Thanks especially for the API resource😍 It's a killer. One resource page to rule them😎
Its so cool when learning how to use it. You can actually pick something that interest you! Glad you like it :)
That is so true man! 😀
Thank you so much for these links and resources!
be sure to give them a try 😊
OMG this has me hooked!! Just so cool!!<3
Glad you liked it!
best list like this I have seen honestly. I actually learned some new things, have some new stuff to try out. Not click bait I have read 500x times, honestly thank you my dude.
Nice, man! Feels good to read that. Hope you can build a lot of cool stuff in a more creative way with all of this :)
This is a great list! Thank you!
Appreciate it! Be sure to hang out on twitter also ✨
🙌🏼thanks a lot!
Hey bro, nice to see your development in the coding world. I hope you keep sharing. Amazing work
You’re my inspiration ❤️ I hope we can work on something awesome later in the future 🔥
Thanks for including Hoverify Leonardo! :)
Very nice list—and refreshing to see one that's geared towards productivity instead of being "another list of X". 👏
Yep, that's what was on my mind while writing it. I still have a lot more that I didn't put there because it was getting too long. I will make another one later on 🏄🏻♂️
Thanks, @leomjaques for adding my website public-apis.io
Nice collection.
I'm the one to thank you for such a useful resource!
Thank you, Leonardo. That list is full of gold nuggets. I did not know all of them. Thanks for sharing it with us.
Cool list, thank you for sharing~