DEV Community

Cover image for The Ultimate Web Developer Resources List 🔥Awesome 200+ Resources
Kiran Raj R
Kiran Raj R

Posted on • Edited on

The Ultimate Web Developer Resources List 🔥Awesome 200+ Resources

Update 14/05/2021 : Click for new resources not in this list.

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.

Resources listed in this post:-

1.CSS Filters

2.Media Query Generators

3.CSS Spinners

4.Font Mixers

5.Box Shadow Generators

6.Meta Tag Generators

7.Favicon Makers

8.Profile Picture Makers

9.Neumorphic Generators

10.Dual Tone Generators

11.Triangle Shape Generators

12.Ribbon / Banner Generators

13.Underline Animation Generators

14.Hamburger Menu Generators

15.HTML Table Generators

16.CSS Button Generators -- Another Related Post

17.Flip Button Generators

18.Checkbox And Radio Button Generators

19.Animation Resources --Another Related Post

20.Icon Resources

21.Color Gradient Generators --Another Related Post

22.Color Palette Generators --Another Related Post

23.SVG Shape Generators --Another Related Post

24.SVG Background Generators --Another Related Post

25.SVG Illustrations Resources --Another Related Post

-------------------------

CSS Filters

The below site help you to generate overlay effect for your images using CSS filter code. You can create overlay by adjusting various parameters like brightness, contrast, grayscale, hue-rotation, opacity, saturation, blur etc. of the overlay. The overlay can contain gradient colors also. The css code for the overlay will also contain browser prefixed codes, so that the overlay will be supported in wide range of browsers.

Click to expand CSS Filter Resources

1. CSS Filters

Alt Text

2. CSS Filter Generator

Alt Text


-------------------------------------------

Media Query Generators

In the current situation the number of different types of devices accessing the web is large and they have different screen layout also. So we cannot use a single layout for all the devices, this cause designing responsiveness for the web project a challenging one. We use media queries to achieve responsiveness. The media queries required for a fluid responsive designing can be complex and time consuming as the number of devices we are targeting get bigger. The below listed resources will help you to generate CSS media query code with ease. They help you to create device specific or general media query quickly, that can be pasted directly into your projects.

Click to expand Media Query Generator Resources

1. Simple CSS

Alt Text

2. Giona

Alt Text

3. Tools51

Alt Text


-------------------------------------------

CSS Spinner

Free CSS spinners that can be used in your web projects, they can be used as pre loaders also.

Click to expand CSS Spinner Resources

1.Loading.io

Alt Text

2.Tobiashlin

Alt Text

3.Icons8.com

Alt Text


-------------------------------------------

Font Generators / Font Mixers

Using different fonts in your web design can make the look of your website better, but if the fonts you use don't compliment each other, it will make the design awful. So it's better to try out various combinations before selecting. These links will help you to play with various fonts, mixing them to create beautiful patters that can make your web project awesome.

Click to expand Font Generators / Mixers Resources

1. Brand Mark

Alt Text

2. Mix Font

Alt Text

3. DJR

Alt Text

4. Threebu

Alt Text

5. Font Joy

Alt Text


-------------------------------------------

Box shadow

Box shadow will help to create a 3D effect for your web components and texts in your web project, to design one which is good for the web project is a time taking one, the below resources will help to generate box shadows quickly and easily, the generated code can be used directly into the style sheet.

Click to expand Box Shadow Generator Resources

1. GetCSSScan

Alt Text

2. CSS3 Studio

Alt Text

3. Enjoy CSS

Alt Text

4. CSSBud

Alt Text

5. Shadows.brumm

Alt Text


-------------------------------------------

Meta Tag Generator

Meta tags are important for SEO, their are a large number of meta tags available we may not know how to configure them. The below links will help you to generate general, important meta tags based on your inputs.

Click to expand Meta Tag Generator Resources

1. Meta Tag Generator

Alt Text

2. SEOptimer

Alt Text

3. Hall Analysis

Alt Text


-------------------------------------------

Free Favicon Maker

Favicons are small 16x16 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.

Click to expand Free Favicon Maker Resources

1. Formito

Alt Text

2. Free Logo Maker text only

Alt Text

3. Favicon.io

Alt Text

4. Favicon-generator

Alt Text

5. Favicon.cc

Alt Text


-------------------------------------------

Profile Picture Maker

Websites that help to create profile pictures.

Click to expand Profile Picture Maker Resources

1. Pfpmaker

Alt Text

  1. Profile Picture maker Alt Text

-------------------------------------------

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.

Click to expand Neumorphic Generator resources

1. Neumorphism

Alt Text

2. Neumorphic

Alt Text


-------------------------------------------

Dual Tone Creator

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

Click to Expand Dual Tone Generator List

1. CSS Duotones.com

Alt Text

2. MedialootAlt Text

3. DuoTone: ShapeFactory

Alt Text


-------------------------------------------

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.

Click to Expand Triangle Generator List

1. Omatsuri

Alt Text

2 .CSS triangle generator

Alt Text

-------------------------------------------

Ribbon / Banner generator

The links help to generate ribbons and banners.

Click to Expand Ribbon Generator List

1. Badge Generator

Alt Text

2. Doodle Nerd

Alt Text

3. CSS Portal : Ribbon

Alt Text

4. CSS Portal : Ribbon Banner

Alt Text


-------------------------------------------

Underline generators

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

Click to Expand Underline Generator List

1. Underline generator

Alt Text

2. CSS Bud

Alt Text


-------------------------------------------

Hamburger Menu Icons

The below links help to generate beautiful hamburger menus icon.

Click to Expand Hamburger Menu Icons List

1 .Hamburgers

Alt Text

2. Burger-generator

Alt Text


-------------------------------------------

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.

Click to Expand Table Generator List

1. Div Table

Alt Text

2. CSS portal

Alt Text

3. HTML.am

Alt Text


-------------------------------------------

Random Generator

Click to Expand Random Generator List
#### 1. 3D Book Cover Creator
Alt Text

2. Water pipe

Alt Text

3. Card FlipAlt Text

-------------------------------------------

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.

Click to Expand CSS Button Resources List

1. GradientButton

Alt Text

2. css3buttongenerator.com

Alt Text

3. bestcssbuttongenerator.com

Alt Text

4. cssbuttoncreator.com

Alt Text

5. cssportal.com

Alt Text

6. Loading.io

Alt Text

7. fromdev.com

Alt Text

8. html-code-generator.com

Alt Text

9. cssgenerators.net

Alt Text

10. buttonoptimizer.com

Alt Text

11. dextronet.com

Alt Text

12. sciweavers.org

Alt Text

-------------------------------------------

Flip Switch

1. cssportal.com

Alt Text

2. proto.io

Alt Text

3. html-code-generator.com

Alt Text

4. Bun

Alt Text

-------------------------------------------

Checkbox Generator

1. Doodle Nerd

Alt Text

2. Bun

Alt Text

-------------------------------------------

Radio Button Generator

1. Doodle Nerd

Alt Text

2. Bun

Alt Text

-------------------------------------------

CSS Animation Resources

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

Click to Expand Animation Resources List

1.The App Guruz

Alt Text

2. CSS animate

Alt Text

3.Animatelo

Alt Text

4.All Animation CSS3

Alt Text

5.CSShake

Alt Text

6.CSSAnimation

Alt Text

7.Hover.CSS

Alt Text

8.Infinite

Alt Text

9.It's Tuesday

Alt Text

10.Magic

Alt Text

11.Micron

Alt Text

12.Motion UI

Alt Text

13.Obnoxious

Alt Text

14.Reboundgen

Alt Text

15.Rocket

Alt Text

16.Wicked CSS

Alt Text

17.Animista

Alt Text

18.Animate.CSS

Alt Text

19.Keyframes

Alt Text

-------------------------------------------

Icons 💥

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

Click to Expand Icon Resources List

1. Feather Icons

Alt Text

2. CSS.gg

Alt Text

3. Jam Icons

Alt Text

4. Line Icons

Alt Text

5. Material Icons

Alt Text

6.Iconmonstr

Alt Text

7. Pixsellz

Alt Text

8. Iconshock

Site Image

9. Icon8

Site Image

10. Flaticon

Site Image

11. Freepik

Site Image

12. Icon Ninja

Site Image

13. SVGrepo

Site Image

14. Captain Icon Web

Alt Text

15. Font Awesome

Alt Text

16. Smplkit

Alt Text


-------------------------------------------

Color Gradient Resources

These links help to generate color gradients, the gradients can be created based on adjusting the controls provided by respective sites. You can create 2 color based or multiple color based gradients using various web sites provided in the list. Some websites also provide with wide range of pre created color gradients that can be copy pasted into your web projects. Click the arrow button section to expand the resources list.

Click to Expand Colour Gradient Resources List

1. Eggradients

Alt Text

2. Colorzilla

Alt Text

3. WebGradients

Alt Text

4. MyColor.space

Alt Text

5. CoolHue

Alt Text

6. GradientHunt

Alt Text

7. UIgradient

Alt Text

8. Grabient

Alt Text

9. Mdigi

Alt Text

10. Coolors

Alt Text


-------------------------------------------

Color Palette Generator

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

Click to Expand Color Palette Resources List

1. ColorsOnTheWeb

Alt Text

2. ColorPalettes

Alt Text

3. ColorHunt

Alt Text

4. 0 To 255

Alt Text

5. Hailpixel

Alt Text

6. Clrs.cc

Alt Text

7. HTMLColorCodes

Alt Text

8. Coolors

Alt Text

9. ColorMind

Alt Text

10. Muzil

Alt Text

11. Canva

Alt Text

12. Mycolor.space

Alt Text

13. AdobeColorWheel

Alt Text

14. Huesnap

Alt Text

15. MaterialPalette

Alt Text

16. ColorExplorer

Alt Text

17. Paletton

Alt Text

18. BrandColor

Alt Text

19. ColorPoint.io

Alt Text

20. Color Mixer

Alt Text


-------------------------------------------

SVG Shape Generator

The below links will help to generate different svg shapes, sites will generate svg code for the shapes you generate, some sites also let you download the design in image format also. Click the arrow button section to expand the resources list.

Click to Expand SVG Shapes Resources List
#### 1. Blob Maker
Alt Text

2. Squircley

Alt Text

3. Softr.io : SVG Shape Generator

Alt Text

4. Blobs

Alt Text

5. Chartgen

Alt Text

6. Outpan : Gradient Wave Generator

Alt Text

7. Wavelry

Alt Text

8. Softr.io : SVG Wave Generator

Alt Text

9. Getwaves.io : Wave Generator

Alt Text

10. SVGwave.in : Wave Generator

Alt Text

11. Haikei : Multiple Shape Generator

Alt Text

12. SVGwaves.io

Alt Text

13. Shape Divider

Alt Text

14. Omatsuri

Alt Text


-------------------------------------------

SVG Background Generators

The links below will help you to generate beautiful backgrounds in svg format. Most of the sites have controls that let you design the backgrounds, generated images can be downloaded in multiple formats.

Click to Expand SVG Background Resources List

1. SVG Backgrounds

Alt Text

2. Hero Patterns

Alt Text

3. Philiprogers: SVGPatterns

Alt Text

4. The Pattern Library

Alt Text

5. Plain Pattern

Alt Text

6. Patternico

Alt Text

7. Paaatterns

Alt Text

8. Cool Background

Alt Text

9. Btmills: Geopattern

Alt Text

10. Bgjar

Alt Text

11. Svgeez

Alt Text

12. Patternpad

Alt Text

13. Tartanify

Alt Text

14. Bg Siteorigin

Alt Text

15. Tabbied

Alt Text

16. Pattern Monster

Alt Text

17. Visiwig

Alt Text

18. Pattern Ninja

Alt Text

19. CSS Background Patterns

Alt Text

20. Patternify

Alt Text

21. Animated CSS Background

Alt Text

22. CSS Stripes Generator

Alt Text

23. Patternizer

Alt Text

24. Doodad: Pattern Generator

Alt Text


-------------------------------------------

Illustration resources

Here I list more than 30+ resources that will help you to get free illustrations for your web projects. Most of these resources provide free contents. Most of the illustrations can me downloaded as SVG format or PNG format, which is better than JPG format, using svg/png format help to increase website performance when compare to one using JPG images. Also svg scale well no need to separate files to create responsiveness. Please click the below arrow to expand the resource list

Click to Expand Illustration Resources List

1. Undraw

Alt Text

2. Draw Kit

Alt Text

3. Indian Doodle

Alt Text

4. Poke

Alt Text

5. open Doodles

Alt Text

6. Lukaszadam

Alt Text

7. IRA Design

Alt Text

8. Mixkit

Alt Text

9. Scale

Alt Text

10. Pulse

Alt Text

11. Gee Me

Alt Text

12. Absurd

Alt Text

13. The Noun project

Alt Text

4. Fresh-folk

Alt Text

15. Rawpixel

Alt Text

16. Webpixels : Eye Pop

Alt Text

17. Delesign

Alt Text

18. Manypixels

Alt Text

19. Icon8

Alt Text

20. Humaans

Alt Text

21. Streamline

Alt Text

22. Lucid

Alt Text

23. Ui8

Alt Text

24. Control.Rocks

Alt Text

25. Niceillustrations

Alt Text

26. Pixel True

Alt Text

27. Isometric

Alt Text

28. Story Set

Alt Text

29. Open Peeps

Alt Text

30. Black illustrations

Alt Text

31. Free Illustrations

Alt Text

32. Illlustrations

Alt Text

33. Getillustrations

Alt Text

-------------------------------------------





Top comments (38)

Collapse
 
geekie profile image
Geekie

Very impressive list! I found a couple of tools that I think might be useful to me, but honestly I didn't check all of them. This is too long of a list for one post and I think each category deserves its own post. Not a bad idea to have all resources on one page, but I just hate to scroll that much!

Collapse
 
kiranrajvjd profile image
Kiran Raj R

i will divide each section later, some are already available , you can check my profile.
Happy to hear that the post was useful.

Collapse
 
keskyle17 profile image
Chris Briggs

Tim Berners-Lee was thinking about people like you when he created the web. It's simply staggering, the number of resources available out there, overwhelming at times, but it's people like you who just make the 'I didn't know what I didn't know' knowns. a lot more accessible. Thank you.

Collapse
 
kiranrajvjd profile image
Kiran Raj R

You are welcome, Happy that this post was useful to you.

Collapse
 
venkateshaj14 profile image
Venkatesh AJ

Hi there, I've created a color palette tool called Colors UI (colorsui.com). Please check this out.

Collapse
 
kiranrajvjd profile image
Kiran Raj R

Sure...

Collapse
 
jeoanand profile image
Anandakumar • Edited

It is a Wonderful Library for every UI developer. Great effort. Thanks, Chettan.

Also, Add this icons package to the icons library. Nice and clean icons it is free we often use this icon.
iconscout.com/unicons/explore/line

Illustrations also:
iconscout.com/

Collapse
 
kiranrajvjd profile image
Kiran Raj R

Appreciate the feedback, will check the links. For that "chettan", Nanni.... thank you

Collapse
 
melfordd profile image
Melford Birakor

Great post! I will take my time to sort out what I need. I appreciate your efforts compiling this post. ❤️👍🔥

Collapse
 
kiranrajvjd profile image
Kiran Raj R

thank you

Collapse
 
nelushaw profile image
Nelusha W

Fantastic collection. Found it extremely useful. You may want to check out 3D Bay
Its a collection of royalty-free 3D illustrations that are free for commercial use. Do consider adding it to your lists. Would be very helpful for devs and creatives.

Collapse
 
capscode profile image
capscode

this is really awesome , amazing collections

Collapse
 
kiranrajvjd profile image
Kiran Raj R

thank you

Collapse
 
sagorahmed profile image
Sagor ahmed

thank you brother it is very helpful to me and i save it. i am beginner now i know most web design resources. i cant thank you enough.

Collapse
 
kiranrajvjd profile image
Kiran Raj R

you are welcome

Collapse
 
wagnerbraga profile image
Wagner Braga

What can I say except, "You're welcome" LOL

Thank you, man... this is gut stuff.

Collapse
 
kiranrajvjd profile image
Kiran Raj R

Thank you...

Collapse
 
arvindpdmn profile image
Arvind Padmanabhan

Useful stuff. Labour of love!

Collapse
 
kiranrajvjd profile image
Kiran Raj R

thank you

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