DEV Community

Cover image for Unique resources for web developers (html, CSS, font, color)
Ahmed Atef
Ahmed Atef

Posted on • Edited on

Unique resources for web developers (html, CSS, font, color)

Before you going on!

Every day I find new references in various categories and this makes me confused to decide which and when to use
I will now prepare this article to choose the reference most relevant to its genre.

Note: know that each reference here has a unique aspect of any other reference in the same category, and I will update it when I find any other good reference.

HTML

WEBSITE DESCRIPTION
Alt Text MDN Reference I use this reference all the time for HTML and HTML5
Alt Text webSiteSetUp for our hands, very good pdfs and images

CSS

WEBSITE DESCRIPTION
Alt Text MDN Reference reference for CSS and CSS300
Alt Text Animate.css CSS library that lets you understand CSS animation and add it easy
Alt Text can I use support tables for front-end technologies for desktop or mobile browsers.
Alt Text Responsive Grid System this website Generate html and CSS codes for a responsive web content.
Alt Text clippy Tool for making clip-paths

Fonts

WEBSITE DESCRIPTION
Alt Text Google Fonts Best resource for free and easy-to-use web fonts. Has an enormous library of fonts.
Alt Text Fontsquirrel The best, 100% free fonts for commercial use. Another well-known huge font library.
Alt Text MyFonts Very largest library of premium fonts

Colors

WEBSITE DESCRIPTION BY
Alt Text Flat UI Colors use it before starting your project for choosing a flat design color.
Alt Text Material Palette Inspired in material design. Generate your palette and download it and with some icons if you need.
Alt Text UI Gradients A collection of gradients for you to choose from and downloadable too.
Alt Text grayscale You can set generate your whole palette so that each color has the same range of color values Kevin Kirchner
Alt Text 97palettes collection of the primary colors for the most used applications Ami Amigo

Conclusion:

If you have any good, and unique references feel free to add them to the comments.

I hope that I have fulfilled the importance of this topic, don't forget to see the following updates for this article.

If there is any question, please feel free and contact me or leave it in the comments.

To see similar works and also very important for every developer or cognitive researcher, you can do so by following me on different social networks.
👉 YouTube, Twitter, LinkedIn 👈

Top comments (13)

Collapse
 
kevnk profile image
Kevin Kirchner

Have you tried grayscale.design for generating a color palette? It's amazing!

You can set generate your whole palette so that each color has the same range of color values—which means you can swap any color with another of the same color value and maintain your contrast ratio.

In other words, you could design a site in grayscale to get the contrast just right, then drop in these generated colors of the same color value and keep your contrast!

Collapse
 
ahmedatefae profile image
Ahmed Atef • Edited

No, I haven't used it before; I tried it and loved it very much.
I will include it in the article with your name if there is no problem.
Thanks 👍

Collapse
 
kevnk profile image
Kevin Kirchner

Totally fine with me. Thanks!

Collapse
 
amiamigo profile image
Ami Amigo • Edited

97palettes.com for more colors!

Collapse
 
ahmedatefae profile image
Ahmed Atef

Exquisite 👌

Collapse
 
amiamigo profile image
Ami Amigo

I actually created it. Thanks!

Thread Thread
 
ahmedatefae profile image
Ahmed Atef

I like the concept of this website, which collects the primary colors together for the most used applications.

Thread Thread
 
amiamigo profile image
Ami Amigo

Thanks! Man. Please share it so more people could use.

Thread Thread
 
ahmedatefae profile image
Ahmed Atef

ok.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Nice resources thanks for sharing.

Collapse
 
ahmedatefae profile image
Ahmed Atef

Happy to help

Collapse
 
skipperhoa profile image
Hòa Nguyễn Coder

Nice. Thanks you!

Collapse
 
ahmedatefae profile image
Ahmed Atef

happy to help🤝