DEV Community

loading...
Cover image for πŸ”₯ 75 Awesome Resources For Web Developers πŸ”₯

πŸ”₯ 75 Awesome Resources For Web Developers πŸ”₯

kiranrajvjd profile image Kiran Raj R ・Updated on ・9 min read

For Updated Post

I have listed 75 web resources that will help you in your web designing and development process. I did not go through what each website is providing, which will make the post too big but I grouped based on the resources they provide in common. Go through the list and bookmark the one that will be useful to you. The list contain resources based on

Web Design Inspirations

CSS Layout (Flexbox And Grid)

Free Stock Images

Free Stock Videos

Color Palette

Color Gradients -- More On Color Gradients

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

When a client approach you for a web design for his product, sometimes we may have no idea where to start, what design to use. The below listed resources will help you, it will give ideas that can be used to produce a good design that will satisfy the customer. Some listed sites also have freebies like web design of components, ui kits, web templates etc. that can be used in our projects.

Click to expand: Web Design Inspirations Resources

1. Behance

Alt Text

2. Dribble

Alt Text

3. Muz.li

Alt Text

4. Awwwards

Alt Text

5. OnePageLove

Alt Text

6. DailyCSS Design

Alt Text

7. SiteSee

Alt Text

8. BestWebSite.Gallery

Alt Text

9. CSS Nectar

Alt Text

10. SiteInspire

Alt Text

11. CollectUI

Alt Text

12. Httpster

Alt Text

13. UpLabs

Alt Text


One of the import aspect of the web development is the layout. We can develop the layout the designer give us using many ways, some time we may not know which CSS property to use to create the layout. The below mentioned list help you to create various layouts using different CSS properties like flexbox, grid etc. You can create layouts quickly with the layout generators based on your requirements, they generate CSS codes for the layouts you designed you can copy the codes directly into your CSS file, which save time and help to avoid complexities. Some listed website contains prebuilt layout examples which can be copied directly into your web projects.

Click to expand: CSS Layout Resources

CSS Grid Based Layout Generator

1. Layoutit

Alt Text

2. CSS Grid Generator by Sarah

Alt Text

3. Griddy.io

Alt Text

4. CSS Grid Layout Generator.PW

Alt Text

5. CSS Portal.Com

Alt Text

6. GridCSS

Alt Text

7. CSSgr

Alt Text

Flexbox based Layout Generator

1. Loading.io

Alt Text

2. Flexbox.Buildwithreact.com

Alt Text

3. My CSS Builder

Alt Text

4.Code Pen By AnchorIdeas : A flexbox visualizer with code generator.

Alt Text

Layout Example Collections With Code

1. Purecss

Alt Text

2. Grid By ExampleAlt Text

3. Quackit.com

Alt Text

4. CSS Layout.io

Alt Text

5. thenoodleincident

Alt Text


Using images without license in you web project will land you in trouble, here is the list of sites which provide free stock image that you can use in your personal or in commercial web projects. Please check the license before you download some of the websites listed here contain both free and paid version, also the license may differ, so make sure the license is apt for your project.

Click to expand: Free Stock Image Resources

1. Pexels

Alt Text

2. Pixabay

Alt Text

3. Unsplash

Alt Text

4. Stocksnap

Alt Text

5. Gratisography

Alt Text

6. LifeOfPix

Alt Text

7. Picjumbo

Alt Text

8. FreeImages

Alt Text

9. NegativeSpace

Alt Text

10. Burst

Alt Text

11. Picography

Alt Text

12. Reshot

Alt Text

13. Foodiesfeed

Alt Text

14. FreeStock

Alt Text

15. Foca

Alt Text

16. KaboomPics

Alt Text


Here is a list of stock videos that can be used in your projects. Please check the license of the video before you download, some may have restriction, that it can be used only for personal purpose or may require attribution.

Click to expand: Free Stock Video Resources

1. Pexels Video

Alt Text

2. Videvo

Alt Text

3. Videezy

Alt Text

4. Coverr

Alt Text

5. Mazwai

Alt Text

6. Mixkit

Alt Text

7. Pixabay Video

Alt Text

8. Vidsplay

Alt Text

9. LibreStock

Alt Text

10. CuteStock

Alt Text

11. Wave

Alt Text

12. IgniteMotion

Alt Text

13. NatureStock

Alt Text

14. SplitShire

Alt Text


Here is a list of color palettes which will help you to pick color for your next web project. The list also contain contrast checker, correct contrast value between the foreground and background will help in better accessibility.

Click to expand: Color Palette Resources

1. LearnUI

Alt Text

2. Colors.lol

Alt Text

3. TinyEye

Alt Text

4. Accessible Color Matrix

Alt Text

5. BootFlat

Alt Text

6. ColorsUI

Alt Text

7. ColorSupplyy

Alt Text

8. Open Color

Alt Text

9. Contrast Checker

Alt Text

10. Button Contrast Checker

Alt Text


The below listed websites help you to generate color gradients for your web projects.

Click to expand: CSS Color Gradient Resources

1.LarsenWork

Alt Text

2.Gradient Magic

Alt Text

3.Virtuosoft

Alt Text

4.LearnUI

Alt Text

5.CSS-Gradient

Alt Text

6.Mesh

Alt Text

7.HyperColor

Alt Text


Hope you like the resources, and was helpful to you. Last time I posted a resource list which contained more than 200 web resources, many felt that it was too long and they did not go through all the resources. So this time I limit to 75, and this list does not contain resources from the previous post. I did not explain about each resources, from next time onwards I will try to post resources based on a particular topic and explain what the resources has to offer, currently I am working on it hope to post some in next week. If you like this, please share, so that others can use the resources, if you found any broken links or errors please comment.





Discussion (31)

Collapse
evelinafr profile image
Collapse
kiranrajvjd profile image
Kiran Raj R Author

You are welcome

Collapse
indibloghub profile image
IndiBlogHub

Great...

Collapse
kiranrajvjd profile image
Collapse
tejaslakade3 profile image
Tejas Lakade

Thanks Lot For This Resources Bro πŸ˜ŽπŸ‘Œ

Collapse
kiranrajvjd profile image
Kiran Raj R Author

You are welcome

Collapse
moondas41181283 profile image
Moon Das

How to engage with you and implementing daily with your Resources.

Collapse
kiranrajvjd profile image
Kiran Raj R Author

You can follow me here.

Collapse
bilalbajou profile image
bilalbajou

thanks you very much

Collapse
kiranrajvjd profile image
Kiran Raj R Author

You are welcome

Collapse
tboss09 profile image
Akosile Oluwatayo Samuel

Woah,
Thanks Thanks a lot..
This is going to be really really helpful for me

Collapse
kiranrajvjd profile image
Kiran Raj R Author

You are welcome

Collapse
emisidleth profile image
emisidleth

thank you very much! I bookmarked a lot of links here!

Collapse
kiranrajvjd profile image
Kiran Raj R Author

You are welcome

Collapse
derah profile image
Derah

Wow, this is amazing. Thanks!
I look forward to seeing more

Collapse
kiranrajvjd profile image
Kiran Raj R Author

You are welcome, sure there will be more posts on web resources soon.

Collapse
prabhukadode profile image
Prabhu

Thanks.

Collapse
kiranrajvjd profile image
Collapse
princekr700 profile image
Kumar Prince

Very helpful. Thanks

Collapse
kiranrajvjd profile image
Kiran Raj R Author

You are welcome

Collapse
abazieudochukwu profile image
abazieudochukwu

Really good thanks

Collapse
kiranrajvjd profile image
Kiran Raj R Author

You are welcome

Collapse
ra1nbow1 profile image
Matvey Romanov

Thank a lot. It is amazing

Collapse
kiranrajvjd profile image
Kiran Raj R Author

You are welcome

Collapse
pai profile image
Pai

Thank you for taking the time to research and share.

Collapse
kiranrajvjd profile image
Kiran Raj R Author

You are welcome

Collapse
moondas41181283 profile image
Moon Das

Yes! But I have no ideas and I am no high educated. And You have listed 75 web resources that will help me in my web designing and development process. It's possible?

Collapse
kiranrajvjd profile image
Kiran Raj R Author

the list of resources are just from few google searches, I just use the effort to create a list. There are many developers here, you can follow then, use their posts to gain knowledge, one day you will become what you dream of. Good luck.

Collapse
telgirent24 profile image
Telgirent24

Thank you very much!
Telgi rent

Collapse
moondas41181283 profile image
Moon Das

How much time needs for having invest in it's to a proper web developer.

Collapse
kiranrajvjd profile image
Kiran Raj R Author

i have no idea about it, i am just a beginner

Forem Open with the Forem app