Unique resources for web developers (html, CSS, font, color)
Tags: html, css, webdev, react
Published: 2020-09-29 13:47:28

## **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](https://dev-to-uploads.s3.amazonaws.com/i/lvz2dr9gb5bk443o59u2.png) | [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) | I use this reference all the time for HTML and HTML5 |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lb5929lfrveagz0bplmd.png) |        [webSiteSetUp](https://websitesetup.org/html5-cheat-sheet/)         |             for our hands, very good pdfs and images |

# `CSS`
| |                                   WEBSITE                                   |                                                               DESCRIPTION |
| :--------- | :-------------------------------------------------------------------------: | ------------------------------------------------------------------------: |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lvz2dr9gb5bk443o59u2.png) | [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) |                                              reference for CSS and CSS300 |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/25j6lor8yzxf52sqz0jy.png) |            [Animate.css](http://daneden.github.io/animate.css/)             |        CSS library that lets you understand CSS animation and add it easy |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/811sah5yr0x5iupzi1e4.png) |                      [can I use](https://caniuse.com/)                      | support tables for front-end technologies for desktop or mobile browsers. |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/maixoeibygleuo74srqs.png) |       [Responsive Grid System](http://www.responsivegridsystem.com/)        |    this website Generate html and CSS codes for a responsive web content. |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iygl2x9k8fdj6m3eztbj.png)|                 [clippy](https://bennettfeely.com/clippy/)                  |                                                Tool for making clip-paths |

# `Fonts`
| |                    WEBSITE                    |                                                                         DESCRIPTION |
| :--------- | :-------------------------------------------: | ----------------------------------------------------------------------------------: |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/98km103w67l9gponpb4y.png) | [Google Fonts](https://www.google.com/fonts)  | Best resource for free and easy-to-use web fonts. Has an enormous library of fonts. |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r7qwzr3bty0ig7ra3uvo.jpg) | [Fontsquirrel](https://www.fontsquirrel.com/) | The best, 100% free fonts for commercial use. Another well-known huge font library. |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5xx19wi8ozkpefp2fvv3.png) |      [MyFonts](http://www.myfonts.com/)       |                                               Very largest library of premium fonts |

# `Colors`
|                                                                                 |                       WEBSITE                       |                                             DESCRIPTION                                             |                                     BY |
| :------------------------------------------------------------------------------ | :-------------------------------------------------: | :-------------------------------------------------------------------------------------------------: | -------------------------------------: |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e1fmm2prf8ku21ukrxkv.jpg) |     [Flat UI Colors](http://flatuicolors.com/)      |                use it before starting your project for choosing a flat design color.                |                                        |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/83zfl4dywyg7rceqcipj.png) | [Material Palette](http://www.materialpalette.com/) | Inspired in material design. Generate your palette and download it and with some icons if you need. |                                        |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qafmw8q2dlcv39qv4o2k.png) |       [UI Gradients](http://uigradients.com/)       |               A collection of gradients for you to choose from and downloadable too.                |                                        |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tge1z9l7cyzpr0hgjupc.png) |       [grayscale](https://grayscale.design/)        |    You can set generate your whole palette so that each color has the same range of color values    | [Kevin Kirchner](https://dev.to/kevnk) |
| ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i92mjlr98memgpav33f1.png) |      [97palettes](http://www.97palettes.com/)       |                  collection of  the primary colors for the most used applications                   | [Ami Amigo](https://dev.to/hondohondo) |


## 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](https://www.youtube.com/channel/UCLjVsnrcH8J1166ctA0pwEg/), [Twitter](https://twitter.com/AhmedAtefWD1), [LinkedIn](https://www.linkedin.com/in/ahmed-atef-dev/) 👈