DEV Community

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

Posted on

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

TL;DR

The world of web development can be overwhelming with so many tools and resources available. To simplify this journey, I've curated a list of the 24 best resources specifically tailored for web developers.

Covering the core technologies of HTML, CSS, and JavaScript, this guide aims to provide beginners and experts with valuable tools and insights to enhance their web development skills. Please explore these handpicked resources to help you excel in web development.


Swirl

Swirl v3 Demo

Searching through multiple sources is challenging. Swirl combines all your databases, notes, PDFs, Jira, GitHub, Vector Databases, Discord, Slack, Teams Chat, etc., and allows you to search through them.

Allowing you to:

  • Generate AI Summaries of the answers. πŸ€–
  • Manage your data and create a knowledge base. Β πŸ“š
  • Save time and be more productive. ⏳

Please give Swirl Search a ⭐️ on GitHub. πŸ’–

Give ⭐ to Swirl on GitHub


CSS Tools

1. CSS Gradient

CSS Gradient is aΒ project that lets you create free gradient backgrounds for your website.

CSS Gradient

2. Colorhunt

Colorhunt provides awesome colour palettes for designers and artists.

Colorhunt

3. CSS Tricks

CSS Tricks hosts some of the best advice, tips, tricks and code snippets on Cascading Style Sheets.

CSS Tricks

4. Generators by Haikei

Haikei is a web app that generate stunning visual content – ready to use with your design tools and workflow.

Generators by Haikei

5. FFFuel

Fffuel is a collection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds.

FFFuel

6. SVG Backgrounds

SVG Backgrounds hosts a collection of SVG Backgrounds ready to be used on your website.

SVG Backgrounds

7. Animated Backgrounds

Animated Backgrounds hosts code snippets of various animated backgrounds that can be used as a background in your website.

Animated Backgrounds

8. Flowbite

Flowbite provides a robust set of design tokens and components based on the popular Tailwind CSS framework.

Flowbite

9. DaisyUI

DaisyUI adds a set of customisable colour names to Tailwind CSS, and these new colours use CSS variables for the values.

DaisyUI


HTML

10. HTML Templates by Quackit

Quackit provides a large selection of free website templates. Depending on your choice, you can choose from a list of simple or more advanced templates.

HTML Templates by Quackit


Icons

11. Devicon

Devicon is a set of icons representing programming languages, designing, and development tools. You can use it as a font or copy/paste the SVG code into your project.

Devicon

12. Flaticon

Download Free Icons and Stickers for your projectsβ€”images made by and for designers in PNG, SVG, etc. Formats.

Flaticon


Low Code Tools

13. Framer

Framer is a low-code, drag-and-drop AI-based website builder.

Framer

14. Bubble

Bubble calls itself the world's only full-stack, no-code platform. Bubble is a tool that will allow you to build apps without writing a single line of code.

Bubble

15. Adalo

Adalo is a low-code responsive web app design tool.

Adalo


Misc

16. CDN JS

CDN JS is a free and open-source Content Delivery Network. It allows web developers to search and load npm packages right into the head of the HTML of their static pages without worrying about npm installation.

CDN JS

Free Images

17. Unsplash

While we have image generator tools, nothing can be the surrealism brought to us by Unsplash. You can use many images on your websites (remember to donate to the photographer & mention them if you're using their images).

Unsplash

18. DALLE-3

The third iteration of the image generation tool by Open AI. You can use this tool for free using the Bing AI Image Generator tool.

DALLE-3


Mockups

19. Mockup World

Tons of free and legal, fully layered, easily customizable photo realistic PSD mockups: Ready to use in your projects, app showcases and presentations! ~ Mentioned on their website!

Mockup World

20. Free Mockup World

Free Mockup World is a collaboration of high-quality best free mockups, including Apple Devices, Branding, Logos, Print, Digital Art, Fashion, Apparel and more. ~ Mentioned on their website.

Free Mockup World

21. UI Design Daily

Free, open-source UI design resources for your website. (Contains Figma mocks-ups for login pages, etc.)

UI Design Daily


Other Useful Open Source Libraries

22. ShadCN

Beautifully designed components built with Radix UI and Tailwind CSS.

Image description

23. Clickvote

Clickvote is an open-source library that takes the hassle of building your reaction components around your content.

Clickvote

24. Spartan NG

ShadCN for Angular. Open-source, community built.

Spartan UI


For Searching Through Your Data - Swirl

Swirl

Swirl is an open source search platform that changes how you interact with your data.

Swirl v3 Demo

Think of it as ChatGPT explicitly tailored for your unique datasets. Whether it's notes, code snippets, PDF files, or emails, Swirl is your go-to platform for instant, AI-driven insights.

Features that set Swirl apart:

  • Universal Search: Seamlessly search through notes, codes, docs, databases, emails, chats, logs, and more. πŸ”
  • Personal AI-Powered Knowledge Assistant: You can build a secure, searchable knowledge base for your company, startup or personal data. πŸ€–
  • One Click Retrieval Augmented Generation: With Swirl, you can instantly perform AI summaries and analytics. You can get answers with sources to the data that generated them. πŸ› οΈ

Please give Swirl Search a ⭐️ on GitHub. πŸ’–

Give ⭐ to Swirl on GitHub

And join our Open Source Slack Community 🌸


Once again, thank you for reading!

Top comments (62)

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
 
subramanyamchalla24 profile image
Subramanyam Challa

Nice collection of resources and swirls' the bestttt

Collapse
 
srbhr profile image
Saurabh Rai

Yes, πŸ™Œ

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
 
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
 
iamjayarep profile image
Jonathan Printers Jr.

This rocks

Collapse
 
srbhr profile image
Saurabh Rai

Thanks

Collapse
 
kumarkalyan profile image
Kumar Kalyan

Useful resources πŸ’–

Collapse
 
srbhr profile image
Saurabh Rai

I'm glad you liked 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
 
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
 
muhamedkanapiya profile image
Muhamed-Kanapiya

Good collection!

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?

Some comments may only be visible to logged-in visitors. Sign in to view all comments.