DEV Community

Cover image for 24 Best Resources 🎨 For Web Developers πŸ’» [HTML + CSS + JavaScript] 😱

24 Best Resources 🎨 For Web Developers πŸ’» [HTML + CSS + JavaScript] 😱

Saurabh Rai on November 01, 2023

TL;DR The world of web development can be overwhelming with so many tools and resources available. To simplify this journey, I've curate...
Collapse
 
nevodavid profile image
Nevo David

Awesome resources especially Swirl!

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Agreed, Swirl is becoming my one my favorite go-to's!

Collapse
 
srbhr profile image
Saurabh Rai

Ha ha yeah!

Collapse
 
srbhr profile image
Saurabh Rai

Swirl is awesome and thanks Nevo πŸ’–

Collapse
 
nevodavid profile image
Nevo David

πŸš€

Collapse
 
felixdev9 profile image
Felix

Good resources, and I've used Fffuel. It's a really awesome website to generate backgrounds and gradients.

Collapse
 
srbhr profile image
Saurabh Rai

Yes, I know right! I've used SVG Backgrounds but hunting down for the resources, this one contains some really good backgrounds.

Also, Flowbite/Daisy UI + FFfuel Elements + Some ChatGPT Optimization would result in an awesome website.

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

Bravo πŸ‘ nice list, I’m saving this so I can bookmark for development.

Collapse
 
srbhr profile image
Saurabh Rai

Yes, thanks Nate!!
Why not create a website using just these resources??

Collapse
 
nathan_tarbert profile image
Nathan Tarbert

That's totally possible, take for instance Bubble - great for non-technical folks, the no-code platform.

I'm kind of old school and love to just spin up a good 'ol Next.js app and build on top of it and there is a lot in your list I can use.

Thread Thread
 
srbhr profile image
Saurabh Rai

Next.js isn't old skool. Real Web Dev workout would be to ship a minimal HTML+CSS+JS website.
Just a single page, enough to convey the information.

Collapse
 
goetzrobin profile image
Robin Goetz

Thank you for mentioning spartan.ng!!

It has been a great adventure building it! For anyone new to web development or Angular feel free to join our community on discord and also keep an eye out for the upcoming announcement from the team!

There's been no better time to start your Angular journey!

Collapse
 
srbhr profile image
Saurabh Rai

Thank you for making such a cool Angular library @goetzrobin

Collapse
 
mike_andreuzza profile image
Michael Andreuzza • Edited

Feel free to add mines, 100% to use!

For Tailwind users.
Tailwind components:
β€” windstatic.com

Free Tailwind themes under the creative commons license:
β€” windbasics.com

Design/Dev
Colors and typography:
– colorsandfonts.com
SVG shsped
β€” svgdoodles.com

SVG Gradients
β€” gradients.michaelandreuzza.com

Hope you find them useful!

Collapse
 
srbhr profile image
Saurabh Rai

Really cool tools. Thanks for your addition.

Collapse
 
snance1985 profile image
Sean

Thank you so much for this incredible resource. I'm a new developer and have been dying to have some interesting and useful tools to play around with. Very, very excited about swirl and CSS Tricks. :D

Collapse
 
subramanyamchalla24 profile image
Subramanyam Challa

Nice collection of resources and swirls' the bestttt

Collapse
 
srbhr profile image
Saurabh Rai

Yes, πŸ™Œ

Collapse
 
kumarkalyan profile image
Kumar Kalyan

Useful resources πŸ’–

Collapse
 
srbhr profile image
Saurabh Rai

I'm glad you liked it!

Collapse
 
iamjayarep profile image
Jonathan Printers Jr.

This rocks

Collapse
 
srbhr profile image
Saurabh Rai

Thanks

Collapse
 
sandipkarmokar profile image
sandipkarmokar

Thanks for curating this fantastic list of resources for web devs, I would like to mention two more site which i have personally used, pexels and mdn docs. I think they would fit here perfectly.

Collapse
 
srbhr profile image
Saurabh Rai

Thanks @sandipkarmokar for your suggestions. Pexels contains some really awesome stock photos, and yeah MDN Webdocks is πŸ’–

Collapse
 
muhamedkanapiya profile image
Muhamed-Kanapiya

Good collection!

Collapse
 
fast profile image
fast-d3v

Really cool resources, thanks for posting it out.
However, CSS Tricks isn't updated for a long time. They're out of Tricks.

Collapse
 
xanwtf profile image
Xan

Hate to break it to you, but CSS-Tricks is basically dead. Digital Ocean bought it, then fired all the staff. Last article was in April.

Collapse
 
srbhr profile image
Saurabh Rai

Oh, I didn't know about the DO take-over. That's sad. The website was/is awesome and I still have some bookmarked pages from their website that I use.

Do you suggest any alternatives for it?

Collapse
 
bibekkakati profile image
Bibek • Edited

Very helpful.
I would like to add one more in the list coderkit.dev. All in one tool for JSON formatter, JWT decoder etc.

Collapse
 
sheko100 profile image
Shaker

Great tools!

Collapse
 
jordantylerburchett profile image
Jordan-Tyler Burchett

Great resource, thank you!

Collapse
 
srbhr profile image
Saurabh Rai

You're Welcome

Collapse
 
shreya_gr profile image
Shreya

awesome curation @srbhr

Keep curating.

Collapse
 
srbhr profile image
Saurabh Rai

Thanks @shreya_gr

Collapse
 
johngribben profile image
John Gribben

Thanks so much!

Collapse
 
srbhr profile image
Saurabh Rai

I'm glad you liked it.

Collapse
 
rupeshkumar profile image
Rupeshkumar23

Nice, is very useful.... Content

Collapse
 
muslmasan profile image
MOHAMED HASSAN ALI

thank you bro

Collapse
 
jerrymarvis profile image
Ogundele babatunde Jeremiah

Woooooow what a awesome resources here.

Collapse
 
chadon473 profile image
innocent

really helpful resource. thanks for bringing out time from your schedule to make this.

Collapse
 
srbhr profile image
Saurabh Rai

I'm glad that you liked these tools.

Collapse
 
vdias profile image
VDIAS

Good list! Thanks!

Collapse
 
srbhr profile image
Saurabh Rai

You're welcome.

Collapse
 
uciharis profile image
the hengker

all are incredible

Collapse
 
mickeydev profile image
Michael Yeboah Frimpong

Thank you for sharing.

Collapse
 
srbhr profile image
Saurabh Rai

You're welcome and than you for reading as well.

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

Glaring typo in the header image

Collapse
 
srbhr profile image
Saurabh Rai

Thanks for pointing that out. I've fixed it! πŸ’–πŸŒΊ

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
srbhr profile image
Saurabh Rai

Thank you, I'm glad that you liked it!

Collapse
 
rukecodes1 profile image
rukecodes

Huge respect OP for sharing these helpful resources thanks man!!!!

Collapse
 
jon_snow789 profile image
Jon Snow
Collapse
 
srbhr profile image
Saurabh Rai

I just checked it out. awesome list

Collapse
 
jon_snow789 profile image
Jon Snow

Thanks

Collapse
 
hasanelsherbiny profile image
Hasan Elsherbiny

fantastic resources πŸ‘πŸ‘

Collapse
 
srbhr profile image
Saurabh Rai

Thanks

Collapse
 
hasanelsherbiny profile image
Hasan Elsherbiny

you welcome

Collapse
 
gaoryrt profile image
gaoryrt

CSS Tricks is dead.

Collapse
 
srbhr profile image
Saurabh Rai

It's a really great place to get started with CSS and learn the usual tricks and things they've featured over there.

Collapse
 
hooryashah profile image
Hoorya Shah

awesome resources and with lots of details

Collapse
 
srbhr profile image
Saurabh Rai

Thank you.

Collapse
 
lindaa profile image
Alysia Benton

no