DEV Community

loading...
Cover image for My favorite resources being a freelancer as a side hustle ๐Ÿ’Ž

My favorite resources being a freelancer as a side hustle ๐Ÿ’Ž

leomjaques profile image Leonardo J. ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป ใƒปUpdated on ใƒป4 min read

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.

Vercel screenshot

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.

Unflop screenshot

๐ŸŽ€ 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.

Css Layout screenshot

๐Ÿ”‘ 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.

Alt Text

๐Ÿงฒ Paatern.css

This is something I only superficially used but I like it. Background and background-image patterns to add complexity to your designs.

Paatern Screenshot

๐Ÿงท Tabler Icons

Of all the thousands of icon provider websites, this is my favorite. It's all SVG, color, size and thickness customizable.

Alt Text

๐Ÿ”‹ 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.

Tailwind CSS screenshot

๐Ÿ”ฎ 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.

Alt Text

๐ŸŽ Treact

This is GOLD. I built a fully responsive, beautiful React website with it, so I know its good. He also uses Tailwind.

Treact screenshot

๐Ÿš’ 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.

Alt Text

๐ŸŽฃ 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.

Alt Text

โšพ๏ธ 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.

Web.dev screenshot

๐ŸŽจ 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.

Projector screenshot

๐Ÿงธ 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.

Public API screenshot

That's it, dear fellow members.

Please, if you liked any of this, react a bit with ๐Ÿ’• and I will make more.

Also, follow me on Twitter and let's hang out there ๐Ÿ“

Discussion

pic
Editor guide
Collapse
ckissi profile image
Csaba Kissi

Thank you, Leonardo, for mentioning my site (tablericons.com)

Collapse
leomjaques profile image
Collapse
madza profile image
Madza

Good job on it ๐Ÿ’ฏ๐Ÿ™‚

Collapse
ckissi profile image
Collapse
henriquerulez profile image
Pedro Henrique

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!

Collapse
leomjaques profile image
Leonardo J. ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Author

Hey my dude!! Of course not, letโ€™s chat. Dm me on twitter

Collapse
henriquerulez profile image
Pedro Henrique

Just followed you, hit me back so we can chat. Thanks man! @Henrique_Rulez

Collapse
akdeberg profile image
Anik Khan

Dude that is awesome! Thanks especially for the API resource๐Ÿ˜ It's a killer. One resource page to rule them๐Ÿ˜Ž

Collapse
leomjaques profile image
Leonardo J. ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Author

Its so cool when learning how to use it. You can actually pick something that interest you! Glad you like it :)

Collapse
akdeberg profile image
Anik Khan

That is so true man! ๐Ÿ˜€

Collapse
liloo2040 profile image
Elodie | DIY Developer

Thank you so much for these links and resources!

Collapse
leomjaques profile image
Collapse
confusedcoder1 profile image
Shristi Singh

OMG this has me hooked!! Just so cool!!<3

Collapse
leomjaques profile image
Collapse
surajv profile image
Surajv

Awesome work :)

Collapse
zicsus profile image
Himanshu Mishra

Thanks for including Hoverify Leonardo! :)

Collapse
jsn1nj4 profile image
JSn1nj4โ€โ€๐Ÿ‘จโ€๐Ÿ’ป

Very nice listโ€”and refreshing to see one that's geared towards productivity instead of being "another list of X". ๐Ÿ‘

Collapse
leomjaques profile image
Leonardo J. ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Author

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 ๐Ÿ„๐Ÿปโ€โ™‚๏ธ

Collapse
mddanishyusuf profile image
Mohd Danish

Thanks, @leomjaques for adding my website public-apis.io

Nice collection.

Collapse
leomjaques profile image
Leonardo J. ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Author

I'm the one to thank you for such a useful resource!

Collapse
natterstefan profile image
Stefan Natter ๐Ÿ‡ฆ๐Ÿ‡น๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

Thank you, Leonardo. That list is full of gold nuggets. I did not know all of them. Thanks for sharing it with us.

Collapse
ansonlowzf profile image
Anson Low Z.F

Cool list, thank you for sharing~

Collapse
vimino profile image
vimino

Thanks for the curated list, this could be very helpful indeed.

Collapse
lucciddev profile image
lucciddev

Awesome list. Would definitely check this out

Collapse
nesci28 profile image
Mark Gagnon

Thanks!
Those are awesome tools that i didnt know existed.

Collapse
komcal profile image
komkanit

Have you ever used Vercel to deploy your customer site or just used it as a prototype?

Collapse
leomjaques profile image
Leonardo J. ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Author

I only use Vercel when deploying a client website! Super good and easy to use, you should give it a go :)

Collapse
kilroyandy profile image
kilroyandy

Thanks for the heads up on vercel!! Love it, so quick to get set up with a custom domain and my github account. Perfect for what I'm working on at the moment!!

Collapse
leomjaques profile image
Leonardo J. ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Author

Iโ€™m glad you liked it! Thanks for coming by. You should follow me on twitter, I often post things there also :)

Collapse
giselamd profile image
Collapse
dhintz89 profile image
Daniel Hintz

Thanks so much for putting this beautiful list together, a lot of these look like real game changers!

Collapse
thomashighbaugh profile image
Thomas Leon Highbaugh

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.

Collapse
leomjaques profile image
Leonardo J. ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Author

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 :)

Collapse
wahidn profile image
WahidN

This is a great list! Thank you!

Collapse
leomjaques profile image
Leonardo J. ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Author

Appreciate it! Be sure to hang out on twitter also โœจ

Collapse
ernestotrujillo profile image
Ernesto Trujillo

๐Ÿ™Œ๐Ÿผthanks a lot!

Collapse
murilomothsin profile image
Murilo Mothsin

Hey bro, nice to see your development in the coding world. I hope you keep sharing. Amazing work

Collapse
leomjaques profile image
Leonardo J. ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Author

Youโ€™re my inspiration โค๏ธ I hope we can work on something awesome later in the future ๐Ÿ”ฅ

Collapse
shripathy profile image
Collapse
ozone72 profile image
Orin Fletcher

Excellent curation! Thanks!

Collapse
leomjaques profile image
Leonardo J. ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป Author

Thanks Orin! Be sure to follow along on twitter ๐Ÿงƒ

Collapse
ouzkagan profile image
ouzkagan

Wow this is amazing post and looks really helpful. I'll sure check them out. Thanks!

Collapse
apazacoder profile image
Collapse
amen profile image
Amen Allah Menjli

Thanks for sharing those ressources, they're very helpfull ๐Ÿ˜