70 Free Resources For Web Designers and Developers
Tags: webdev
Published: 2022-10-09 12:34:17

In today's post I'm going to make you familiar with 70 amazing resources that you're surely going to be using in your career whether you are UI designer or web developer. So save this post for future references and enjoy the read 😊

# 1. [unsplash](https://unsplash.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz4i3keev5t6fpwryvjb.png)

Unplash provides high quality free images.

# 2. [pexels](https://www.pexels.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9s0519yzjeu3q54z7ia.png)

The best free stock photos, royalty free images & videos shared by creators.

# 3. [pixaby](https://pixabay.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whuw1pg98ko3l8h2rte0.png)

Stunning free images & royalty free stock. Over 2.7 million+ high quality stock images, videos and music shared by our talented community.

# 4. [placeholder](https://placeholder.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1oul34f3tx5j8auf8pfw.png)

Placeholder.com is a free image placeholder service for web designers, serving billions and billions of images each year.

# 5. [burst](https://burst.shopify.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xz48tka3my4m4wbgbqvd.png)

Free stock photos and images. Download stunning photos for websites and commercial use

# 6. [cover](https://coverr.co/)

Beautiful Free Stock Video Footage
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b17xzfgjbssj6rcsat75.png)

# 7. [videezy](https://www.videezy.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8fhp0ps26g80j7rwedsk.png)

Free HD Stock Footage & 4K Videos!

# 8. [videvo](https://www.videvo.net/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czmkl8lr8w7u6cw79hxj.png)

500,000+ stock footage clips, motion graphics, Premiere Pro templates, After Effects templates, royalty free music and sound effects, all at your fingertips.

# 9. [uidesigndaily](https://uidesigndaily.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axq2cls8tawm8lbji5u8.png)

Ready made figma designs to practise front end

# 10. [freevector](https://www.freevector.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evhneipxikqdh60ablwb.png)

A World of Free Vector Arts at Your Fingertips!

# 11. [humaaans](https://www.humaaans.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yiln0i5pokpltblgke91.png)

Humaaans Mix-&-match illustrations of people with a design library

# 12. [paaatterns](https://products.ls.graphics/paaatterns/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpj9uncr06agupbadcfa.png)

Free collection of beautiful patterns for all vector formats

# 13. [undraw(https://undraw.co/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ua17hj41vupc7broiclu.png)

Create better designed websites, products and applications. Browse to find the images that fit your messaging, automagically customise the color to match your brand and use it as a normal image, embedded code or directly in your design workflow.

# 14. [freeillustrations](https://freeillustrations.xyz/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xid4sk5knllehp21gdxw.png)

FIND FREE TO USE IMAGE ILLUSTRATIONS
ILLUSTRATION KIT | CONSTRUCTOR | TOOLS

# 15. [google fonts](https://fonts.google.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a4sondle0nqszpc75rvf.png)

Collections of hundreds of amazing free fonts

# 16. [fontpair](https://www.fontpair.co/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/052ln070f85ishyagm5l.png)

Free fonts and font pairings to use for your next design project

# 17. [dafont](https://www.dafont.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p285cwwh2s1cpibdsbon.png)

Dants provide free fonts for personal use

# 18. [1001freefonts](https://www.1001freefonts.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wvfm2nb7i4nx25ikfhec.png)

Download 1000s free fonts made available by experts

# 19. [flaticon](https://www.flaticon.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmy39n0wc07i91kbfmq2.png)

Access 8.3M+ vector icons & stickers
Download Free Icons and Stickers for your projects. Resources made by and for designers. PNG, SVG, EPS, PSD and CSS formats.

# 20. [fontawesome](https://fontawesome.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l95rdov5tf97hxuyvsh.png)

Take the hassle out of icons in your website. Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.

# 21. [iconfinder](https://www.iconfinder.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/72eyqs4he6mrfm6x2al3.png)

Make beautiful designs faster, Millions of graphics for your design projects. Created by independent designers.

# 22. [iconbros](https://iconbros.com/collections/essentials)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4u930byohkdcc5ajgss.png)

Amazing high quality free icons to use in your projects

# 23. [css icons](https://css.gg/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6ox35krpyysxbmukk52.png)

700+ CSS Icons. Open-source CSS, SVG and Figma UI Icons
Available in SVG Sprite, styled-components, NPM & API

# 24. [material design icons](https://materialdesignicons.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4og9dndmjjmrcu1xyac.png)

Material Design Icons' growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project.

# 25. [linearicons](https://linearicons.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4rdwrmwftinl7cy9pik.png)

Linearicons Ultra Crisp Line Icons with Integrity

# 26. [free stock music](https://www.free-stock-music.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/enw70ij0f9efwt6bihd6.png)

Free musics to use in projects

# 27. [bensound](https://www.bensound.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6f8oxw6408wgrl2k6o8r.png)

Royalty Free Music for Creators. The best Music, by the best Artists

# 28. [musopen](https://musopen.org/music/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebdfwoz8wvu9zfafw38h.png)

Royalty free musics 

# 29. [mixkit](https://mixkit.co/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/141gfni08rmwvopr7kh7.png)


Free assets for your next video project
Awesome Stock Video Clips, Stock Music, Sound Effects & Video Templates. All available for free!

# 30. [animate css](https://animate.style/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6jfpchq4cbappg0ddgx.png)

A Cross-Browser CSS made animations

# 31. [bounce js](https://www.javascripting.com/view/bounce-js)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcpjbw33ebm0mywvxoap.png)

The definitive source of the best
JavaScript libraries, frameworks, and plugins.

# 32. [animejs](https://animejs.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf1ro6vbilxt9uefk19n.png)

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

# 33. [minimamente](https://www.minimamente.com/project/magic/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b5wmr28sz04y51xew3h.png)

Animations such as: Magic Effects, Bling, Static Effects and a lot more 

# 34. [hover css](https://ianlunn.github.io/Hover/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmfqg50hno0e4qxz329y.png)

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

# 35. [css shake](https://elrumordelaluz.github.io/csshake/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbyr6dn5qy2kxy58uhbe.png)

Some CSS classes to move your DOM!

# 36. [tiny png](https://tinypng.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qk23f8xc7n41nhaaj4e.png)

TinyPNG uses smart lossy compression techniques to reduce the file size of your WEBP, JPEG and PNG files.

# 37. [imagecompressor](https://imagecompressor.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eo911e587h7ueutpizsv.png)

This online image optimizer uses a smart combination of the best optimization and lossy compression algorithms to shrink JPEG, GIF and PNG images to the minimum possible size while keeping the required level of quality.

# 38. [compressor](https://compressor.io/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxl6afxhjh6wabmhwhgk.png)

Fast & efficient image compression

# 39. [squoosh](https://squoosh.app/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqg58166gby03g082qlr.png)

Squoosh image minimizer

# 40. [bulkresizephotos](https://bulkresizephotos.com/en)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qict4yflhg0eh2p5969t.png)

Resize batches of images.

# 41. [behance](https://www.behance.net/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9npxnwjnzal2s2crwh7e.png)

Hundreds of inspirational art wors from artists to artists

# 42. [dribbble](https://dribbble.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzsfq6rfafu2jyuz1vdi.png)


Explore the world’s leading design portfolios. Millions of designers and agencies around the world showcase their portfolio work on Dribbble - the home to the world’s best design and creative professionals.

# 43. [awwwards](https://www.awwwards.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bjiyc3i7iyew7inbx54.png)

The awards of design, creativity and innovation on the internet

# 44. [designnotes](https://www.designnotes.co/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c783pfp93km07118jr42.png)

A free resource library for product designers

# 45. [httpster](https://httpster.net/2020/apr/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tmqa4i43fhnie8mtg5b.png)

Httpster is an inspiration resource showcasing totally rocking websites made by people from all over the world.

# 46. [figma](https://www.figma.com/graphic-design-tool/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzmbvis491i3xqwcqf63.png)

An Online Graphic Design Tool. All the elements you need to create amazing logos, social media graphics, presentations and more, for free.

# 47. [vectr](https://vectr.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81rlrpchmd8y1vb6hshr.png)

Free Vector Graphics Editor. Step into the world of Vectr, a simple yet powerful Free graphics editor that lets you design / edit vector graphics like a pro via its web and desktop cross-platform, without a steep learning curve.

# 48. [canva](https://www.canva.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53upo03khhody8m49sq4.png)

What will you design today? Canva makes it easy to create and share professional designs.

# 49. [wireframe](https://wireframe.cc/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cootc3x8xsss5p02bdwk.png)

Create better wireframes with an app-tuned for wireframing

# 50. [pixlr](https://pixlr.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/didwgdbnbmcofimd104y.png)

Photo editor, animation and design. Pixl is  the No 1 in photo editing and design tools. Edit photos and create stunning designs right in your browser, on your phone or desktop for free. Start from an empty canvas, a photo, a video or select one of our professionally crafted templates.

# 51. [bootstrapstudio](https://bootstrapstudio.io/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ey8gmfg0hq4qgmpwjnmu.png)

Bootstrap Studio A powerful desktop app for creating responsive websites using the Bootstrap framework.

# 52. [subtlepatterns](https://www.toptal.com/designers/subtlepatterns/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgx9u2101rsn6v30ka1k.png)

Latest UI patterns to make UI more appealing

# 53. [color thief](https://lokeshdhakar.com/projects/color-thief/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/febw23zsj9galemdnrcb.png)

Grab the color palette from an image using just Javascript.
Works in the browser and in Node.

# 54. [patternizer](https://patternizer.com/3v4c)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kce6rox8q638pecom5w2.png)

Patternizer where you create UI pattern that you like

# 55. [bootstrap](https://getbootstrap.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ft7cgd10ga9l47thejdv.png)

Build fast, responsive sites with Bootstrap

# 56. [tailwindcss](https://tailwindcss.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxy9dqiqdxjd9a7pirmk.png)

Rapidly build modern websites without ever leaving your HTML.

# 57. [materializecss](https://materializecss.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mibnar0zrq9ltu9wjgn2.png)

A modern responsive front-end framework based on Material Design

# 58. [sass](https://sass-lang.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iv2apun2urxfwwbf3qlg.png)

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

# 59. [bulma](https://bulma.io/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mu3rtrwgg8wuc1ju810z.png)

Bulma: the modern CSS framework that just works.

# 60. [foundation](https://get.foundation/sites/docs-v5/css.html)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9chjkjtvvkdc2vb6qsda.png)

Foundation is the most advanced, responsive front-end framework in the world. The framework is mobile friendly and ready for you to customize it any way you want to use it.

# 61. [react](https://reactjs.org/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zbixoaxt2ngv6bzhlriw.png)

A JavaScript library for building user interfaces

# 62. [angular](https://angular.io/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1csotguhnpqx1nubxmce.png)


The modern web developer's platform

# 63. [vue](https://vuejs.org/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzxqoto85hyn8sgk8c1l.png)


The Progressive JavaScript Framework An approachable, performant and versatile framework for building web user interfaces

# 64. [next js](https://nextjs.org/docs/getting-started)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0n8xh6pvbbl4sw7krk95.png)


The React Framework for Production. Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

# 65. [materialui](https://mui.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5irnxzdgpseocukwmji.png)

Move faster with intuitive React UI tools

# 66. [w3validator](https://validator.w3.org/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdtl7vsfb0vv6epyb6l8.png)

Validator to validate HTML, CSS, JavaScript code

# 67. [pipedream](https://pipedream.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71kh7axysplwky1t4jvs.png)

Connect APIs, remarkably fast.

# 68. [pingdom](https://tools.pingdom.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qz7ok31bhp2zx2xmvavg.png)

Pingdom Website Speed Test

# 69. [comparium](https://comparium.app/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e969ecxhvlumliuva3j9.png)

Test browser compatibility and deliver a seamless user experience of your web resource with a powerful assistant.
Run web browsers tests in a few simple clicks and get access to a wide range of browsers, browser versions, and platforms.

# 70. [seositecheckup](https://seositecheckup.com/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b91hklcl80xtewqpyfqj.png)

Run unlimited analysis on our most powerful servers. Stored reports make it easy to view progress and past work.