🔥 75 Awesome Resources For Web Developers 🔥
Tags: css, webdev, beginners, javascript
Published: 2021-05-14 06:18:22


### [For Updated Post](https://dev.to/kiranrajvjd/awesome-resource-for-your-web-projects-75-background-resources-2cm8)
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](https://dev.to/kiranrajvjd/awesome-resource-for-your-web-projects-75-background-resources-2cm8)
#-------------------------------
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.

{% collapsible Click to expand: Web Design Inspirations Resources %}

#### 1. [Behance] (https://www.behance.net/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eb4rsooawpf175ajzbll.PNG)
#### 2. [Dribble](https://dribbble.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsnk950dpa6wpvpleptx.PNG)
#### 3. [Muz.li] (https://muz.li/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rojagd42oaltizb8hmgw.PNG)
#### 4. [Awwwards] (https://www.awwwards.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djrwtj85c0u8jt0y5n4f.PNG)
#### 5. [OnePageLove] (https://onepagelove.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ayq4dit3rt4dsa47pp9p.PNG)
#### 6. [DailyCSS Design] (https://dailycssdesign.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkfmtys82tvfk5d3qyvy.PNG)
#### 7. [SiteSee] (https://sitesee.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jld63gto7m47a4xy29nk.PNG)
#### 8. [BestWebSite.Gallery](https://bestwebsite.gallery/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asf73xrkcxxv6csl12sg.PNG)
#### 9. [CSS Nectar](https://cssnectar.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ds9j9ksd4w596ta5ehe.PNG)
#### 10. [SiteInspire](https://www.siteinspire.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epdbudoodkpw36ypp7hn.PNG)
#### 11. [CollectUI](https://collectui.com)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0n994yafr8vnrwpu366.PNG)
#### 12. [Httpster] (https://httpster.net/2021/apr/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydo4vuprkfxyhk4hhxsr.PNG)
#### 13. [UpLabs] (https://www.uplabs.com/templates/web)  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcz6ncdp0qlet0z0u9jw.PNG)
{% endcollapsible %}

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.

{% collapsible Click to expand: CSS Layout Resources %}  
#### CSS Grid Based Layout Generator
#### 1. [Layoutit](https://grid.layoutit.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3gu9fwf9r7o149zjpzm.png)
#### 2. [CSS Grid Generator by Sarah](https://cssgrid-generator.netlify.app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvqt7kbkl9uj0efa9h2b.PNG)
#### 3. [Griddy.io](https://griddy.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9x5uifncaa598pufdbk.PNG)
#### 4. [CSS Grid Layout Generator.PW](https://css-grid-layout-generator.pw/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7su8kkmm8gtncqnzozg7.PNG)
#### 5. [CSS Portal.Com](https://www.cssportal.com/layout-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umyxh3eczuij7gcxsha8.PNG)
#### 6. [GridCSS](https://www.gridcss.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4e8boo1nk2dqdk3o43b.PNG)
#### 7. [CSSgr](https://cssgr.id/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n32iaxcgz0bkp7uwrjd2.PNG)

#### Flexbox based Layout Generator
#### 1. [Loading.io](https://loading.io/flexbox/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1c2fjzk804g2t55sqsx.PNG)
#### 2. [Flexbox.Buildwithreact.com](https://flexbox.buildwithreact.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdjeitfwvnonxoidp0r8.PNG)
#### 3. [My CSS Builder](https://www.mycssbuilder.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b66n0j7f46uhv1ohqbr6.PNG)
#### 4.[Code Pen By AnchorIdeas](https://codepen.io/AnchorIdeas/full/GQbrgp/) : A flexbox visualizer with code generator.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocj0gzz6ng7c3xhc2u0j.png)

## Layout Example Collections With Code
#### 1. [Purecss](https://purecss.io/layouts/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkjjlkzcxyl8l2t841l1.PNG)

#### 2. [Grid By Example] (https://gridbyexample.com/examples/page-layout/)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7iplwxll778osj2cnav.PNG)
#### 3. [Quackit.com](https://www.quackit.com/html/templates/css_grid_templates.cfm)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhgxd2bh85pzubiums8q.PNG)
#### 4. [CSS Layout.io](https://csslayout.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ts2m9nkd3pmft8ve8o9q.PNG)

#### 5. [thenoodleincident](http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bgo0r3lzxzx0dgsalj28.PNG)
{% endcollapsible %}

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.

{% collapsible Click to expand: Free Stock Image Resources %}
#### 1. [Pexels] (https://www.pexels.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jz5n45xjcwfqfjmsjb54.PNG)
#### 2. [Pixabay](https://pixabay.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gf3j34cezhrvqm9hfyvr.PNG)
#### 3. [Unsplash](https://unsplash.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jvnioastqzvewc6dc75.PNG)
#### 4. [Stocksnap](https://stocksnap.io/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f62ty9vk700iy9hvuo7y.PNG)
#### 5. [Gratisography](https://gratisography.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jylgr33z516i8c31jke4.PNG)
#### 6. [LifeOfPix](https://www.lifeofpix.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5g3upr6ocyygj7adde5.PNG)
#### 7. [Picjumbo](https://picjumbo.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gclqjewu4onfnokj21kp.PNG)
#### 8. [FreeImages](https://www.freeimages.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5om4ho9mmsb1joptbpz.PNG)
#### 9. [NegativeSpace](https://negativespace.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8u3zbjygdpfylnb7tdg.PNG)

#### 10. [Burst](https://burst.shopify.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpq50gezono1qhsze3xn.PNG)
#### 11. [Picography](https://picography.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6sgge8lg3u4c5bmq4c5j.PNG)
#### 12. [Reshot](https://www.reshot.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/02p782hsdcn9c9j8rj28.PNG)
#### 13. [Foodiesfeed](https://www.foodiesfeed.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8q0l15rsvpyvxivgocyo.PNG)

#### 14. [FreeStock](https://freestocks.org/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdyt85d8k48k0ldureqh.PNG)
#### 15. [Foca](https://focastock.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kh2l0g2goyp2v1waj613.PNG)
#### 16. [KaboomPics](https://kaboompics.com/)  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4ah1w4go2agwvqzf4jy.PNG)
{% endcollapsible %}

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.

{% collapsible Click to expand: Free Stock Video Resources %}  
#### 1. [Pexels Video] (https://www.pexels.com/videos/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzung2x4ysu63z0zrt3y.PNG)
#### 2. [Videvo] (https://www.videvo.net/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53u3iba1ecc2ibcsykyd.PNG)
#### 3. [Videezy] (https://www.videezy.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50h9tpff2t0xkuxkcioe.PNG)
#### 4. [Coverr] (https://coverr.co/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3mbx1obgc0g66vjcpc0.PNG)
#### 5. [Mazwai] (https://mazwai.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8wmnxwslo2hso911not.PNG)
#### 6. [Mixkit] (https://mixkit.co/free-stock-video/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zurcr8hl0kawqd1wmerr.PNG)
#### 7. [Pixabay Video] (https://pixabay.com/videos/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kgvrylcor71zft9k2lm.PNG)
#### 8. [Vidsplay] (https://www.vidsplay.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3pd8qyr2gjzs4w6826t.PNG)
#### 9. [LibreStock] (https://video.librestock.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kh6knfm53elbohqatz2.PNG)

#### 10. [CuteStock] (https://cutestockfootage.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2upsuq3d5d0k2fqcm7st.PNG)

#### 11. [Wave] (https://wave.video/assets/stock/free-videos)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/219rp7p5q7ouk44h57f1.PNG)
#### 12. [IgniteMotion](https://www.ignitemotion.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/clqgoedsi07ztva82w8z.PNG)
#### 13. [NatureStock](https://www.naturestockvideos.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yctodvxwpm1uklgrjksw.PNG)
#### 14. [SplitShire](https://www.splitshire.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vna4khp6euur5i1x7o2r.PNG)
{% endcollapsible %}

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.

{% collapsible Click to expand: Color Palette Resources %} 
#### 1. [LearnUI] (https://learnui.design/tools/data-color-picker.html#palette)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iscc54xperwp1l7g7xa4.PNG)
#### 2. [Colors.lol](https://colors.lol/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cr6w7yhgn0xkm9jej2mi.PNG)
#### 3. [TinyEye](http://labs.tineye.com/multicolr/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wm6rr5z751qoa3s5wpp.PNG)
#### 4. [Accessible Color Matrix](https://toolness.github.io/accessible-color-matrix/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1184j8rl6f8xjgc2wcac.PNG)
#### 5. [BootFlat](https://bootflat.github.io/color-picker.html) 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvt010m8ykkoz3uck8sm.PNG)
#### 6. [ColorsUI](https://colorsui.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eie8teoke4q22fw1ljv0.PNG)

#### 7. [ColorSupplyy](https://colorsupplyyy.com/app/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t83c45r1pt085te0n8ae.PNG)
#### 8. [Open Color](https://yeun.github.io/open-color/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iry4iewl4g3v5dy5ljrx.PNG)
#### 9. [Contrast Checker](https://contrastchecker.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hk1vbakr9zr0oehsxodd.PNG)
#### 10. [Button Contrast Checker](https://www.aditus.io/button-contrast-checker/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp053q2qaaw75r4arjwa.PNG)
{% endcollapsible %}

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

{% collapsible Click to expand: CSS Color Gradient Resources %}  
#### 1.[LarsenWork](https://larsenwork.com/easing-gradients/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxggsbvk0tio8z8cacgg.PNG)
#### 2.[Gradient Magic](https://www.gradientmagic.com/collection/popular/gradient/1587510852621)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rls79vq27uwm13w6fx3c.PNG)
#### 3.[Virtuosoft](https://www.virtuosoft.eu/tools/css-gradient-generator/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmfxjxu8lvqk23v9fxn5.PNG)
#### 4.[LearnUI](https://learnui.design/tools/gradient-generator.html)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2grf59dzuborn0e3vza.PNG)
#### 5.[CSS-Gradient](https://www.css-gradient.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1o21l47r6r2zsvpqg0uo.PNG)
#### 6.[Mesh](https://meshgradient.com/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fcitp55hu17ijsaenrv.PNG)
#### 7.[HyperColor](https://hypercolor.dev/)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52bltsbde2pwvzpkbtux.PNG)
{% endcollapsible %}


Hope you like the resources, and was helpful to you. Last time I posted a resource list which contained more than [200 web resources](https://dev.to/kiranrajvjd/the-ultimate-web-developer-resources-list-200-resources-2gf5), 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. 

{% post https://dev.to/kiranrajvjd/awesome-resource-for-your-web-projects-75-background-resources-2cm8 %}
{% link https://dev.to/kiranrajvjd/all-that-you-need-to-know-about-date-and-time-in-javascript-5bfd %}
{% link https://dev.to/kiranrajvjd/24-html-tags-you-may-not-know-37be %}
{% link https://dev.to/kiranrajvjd/25-awesome-fonts-from-google-fonts-40im %}
{% link https://dev.to/kiranrajvjd/10-simple-toggle-switch-animation-using-css-and-javascript-3gpn %}