Web development is not an easy task for beginners, to create a web project that standout takes lot of effort, time and vast knowledge in various html elements, CSS properties and JavaScript. I list 200+ resources that will help junior web developers to fill the gaps in knowledge they lack in HTML and CSS. These will definitely help developers to create amazing web projects with less effort and quickly. All the resources listed here are free to use. These resources can be used to understand how CSS works which help to learn CSS quickly. Hope this will help you, Happy Coding.

CSS Filters

The below site help you to generate CSS filter code. You can adjust various parameters like brightness, contrast etc.

——————————————-

Media Query Generators

The below listed sites help to generate CSS media query codes.

——————————————-

CSS Spinner

Free CSS spinners that can be used in your web projects.
1.Loading.io

2.Tobiashlin

3.Icons8.com

——————————————-

Font Generators / Font Mixers

These links help to play with various fonts, mixing them to create beautiful patters, these patters can be copied to your web projects.

——————————————-

Box shadow

Help to create box shadows using css code.

——————————————-

Meta Tag Generator

These links help to generate meta tags based on your inputs.

——————————————-

Free Favicon Maker

Favicons are small 16×16 icon files that are displayed next to the URL of your site in a browser’s address bar, the below sites helps you to create favicons.

——————————————-

Profile Picture Maker

Websites that help to create profile pictures.

——————————————-

Neumorphism

Neumorphism is a design trend which is marked by minimal and realistic-looking UI. A few sites that help to generate css code for the neumorphism design is listed below.

——————————————-

Dual Tone Creator

The below links help to create dual tone effect using css.

——————————————-

Random Animation Generator

——————————————-

Triangle generator

These links help to generate triangle shapes using html and css, you can use the shape by simply copying the code to your project.

——————————————-

Ribbon / Banner generator

The links help to generate ribbons and banners.

——————————————-

Underline generators

These links help to generate underlines and animations that can be applied on underlines in CSS.

——————————————-

Hamburger Menu Icons

The below links help to generate beautiful hamburger menus icon.
1 .Hamburgers

——————————————-

Table Generator

The links help to create beautiful html tables. The links help to generate both the html code for table and CSS code to style the tables based on your preferences.

——————————————-

Button Generators

The below links will help to design various buttons based on your preferences, these links generate CSS code of your designs, which can be copied into your projects. Various hover effect can also be generated using the links.

——————————————-

Flip Switch

——————————————-

Checkbox Generator

——————————————-

Radio Button Generator

——————————————-

Icons 💥

The below links provide with free icon resources, which can be used in web projects.

——————————————-

Color Gradient Resources

These links help to generate color gradients CSS codes, which can be copy pasted into your web projects.

——————————————-

Color Palette Generator

The below links will help to generate color palette, which can make your web project awesome.

——————————————-

SVG Shape Generator

The below links will help to generate svg shapes, you can generate svg codes for the shapes you created. To add the shapes to your project simply copy paste the codes to your project.

——————————————-

SVG Background Generators

The links below will help you to generate beautiful backgrounds in svg format based on your inputs.

——————————————-

Illustration resources

The below resources will help you to get free illustrations for your web projects.

1. Undraw

2. Draw Kit

3. Indian Doodle

4. Poke

5. open Doodles

6. Lukaszadam

7. IRA Design

8. Mixkit

9. Scale

10. Pulse

11. Gee Me

12. Absurd

13. The Noun project

14. Fresh-folk

15. Rawpixel

16. Webpixels : Eye Pop

17. Delesign

18. Manypixels

19. Icon8

20. Humaans

21. Streamline

22. Lucid

23. Ui8

24. Control.Rocks

25. Niceillustrations

26. Pixel True

27. Isometric

28. Story Set

29. Open Peeps

30. Black illustrations

31. Free Illustrations

32. Illlustrations

33. Getillustrations

——————————————-

CSS Animation Resources

The below resources help you to get CSS code to animate various components of your web projects.

1.The App Guruz

2. CSS animate

3.Animatelo

4.All Animation CSS3

5.CSShake

6.CSSAnimation

7.Hover.CSS

8.Infinite

9.It’s Tuesday

10.Magic

11.Micron

12.Motion UI

13.Obnoxious

14.Reboundgen

15.Rocket

16.Wicked CSS

17.Animista

18.Animate.CSS

19.Keyframes

This content was originally published here.