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 ๐Ÿ“

Posted on by:

leomjaques profile

Leonardo J. ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

@leomjaques

Front-end Developer. Here I share my journey on building cool, breathtaking stuff for the web ๐Ÿง™๐Ÿปโ€โ™‚๏ธ Follow my twitter! ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป

Discussion

markdown guide
 
 

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

 

Thank you so much for these links and resources!

 
 

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! ๐Ÿ˜€

 
 

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

 

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

 

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~

 

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

 

Awesome list. Would definitely check this out

 

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

 

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!!

 

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

 
 

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

 

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 โœจ

 
 

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

 

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

 
 

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