99 Of The Best Free Tools For Web Designers And Web Developers
Category: BLOG
Learning the skills you need for web design or web development is the first step toward working on the web—but that also means familiarizing yourself with the tools of the trade. That’s why we put together this list of 99 free tools you’ll need for either web-development, web design, or both.
Every resource on this list is free to use and complements the skills we teach in our Web Design, Web Developer, and Front End Developer Blueprints (instructor-led classes that walk you through the fundamentals of each role).
As you learn, keep this list handy and think of it as your own virtual toolbox.
Table of Contents
- Newsletter Lists
- Software + Apps
- Photos
- Symbols + Icons
- Fonts
- Colors
- Backgrounds + Textures
- UI (User Interface) Kits/Guides
- Domain Name Search Engines
- Frameworks, Templates, Code Packs, + Themes
- Code Style Guides
- Code Validation
Web Design Resources
This web designing tools list includes web designing tools for beginners, as well as design resources that will serve you through an entire career.
NEWSLETTER LISTS
1. Creative Market(opens in a new tab)
Before you do anything else, go get on the Creative Market newsletter list(opens in a new tab). Once a week, you’ll get an email packed with 5 free downloads, including everything from patterns and fonts to templates and themes.
SOFTWARE + APPS
These software programs and web applications provide a solid foundation for web design.
2. CoffeeCup Software(opens in a new tab)
They offer up all sorts of free apps for web designers, including an HTML editor, web form builder, shopping cart designer, and many others.
3. InVision app(opens in a new tab)
Powerful prototyping and collaboration tools. You can get high-fidelity mockups and prototypes in just minutes.
4. Pixlr(opens in a new tab)
Edit images right in your browser.
5. Canva(opens in a new tab)
Amazingly easy graphic design software that anyone can use. The search and drag function is so simple and helpful!
6. Easel.ly(opens in a new tab)
Awesome free infographic templates.
PHOTOS
Photos are a critical part of web design. These stock photo resources are key go-to’s when you need the right photo right now.
Desygner(opens in a new tab)
Desygner is more than just images; it is also a powerful design tool for content creation, where you can use these images on your designs or thousands of pre-designed templates that you can get for free. It is one of the best tool to create beautiful graphic designs like a Pro.
7. Unsplash(opens in a new tab)
Some of the most gorgeous free stock photos out there, and with tons of variety. New images are added every day.
8. PicJumbo(opens in a new tab)
Get free photos delivered to your inbox that are totally free for personal and commercial use.
9. Gratisography(opens in a new tab)
Free high-resolution images that you can use in personal and commercial projects. They have easy-to-browse categories: animals, nature, objects, whimsical, and more.
10. Compfight(opens in a new tab)
Search tons of images licensed for personal and/or commercial use, mostly from Flickr.
11. IM Free(opens in a new tab)
Curated web design resources, including a ton of categorized photos, plus icons and templates.
12. Stock Up(opens in a new tab)
Search over 9,000 photos from 26 different websites, all in one place.
13. Death to the Stock Photo(opens in a new tab)
Get on their email list and get their free photo packs in your inbox once a month.
14. Little Visuals(opens in a new tab)
If you join their list, you’ll get 7 free high-res photos emailed to you once a week.
15. New Old Stock(opens in a new tab)
Get free, vintage photos from public archives.
16. Cupcake(opens in a new tab)
Free, high-res photos by Jonas Nilsson Lee.
17. Pexels(opens in a new tab)
10 new free stock photos every day.
18. Magdeleine(opens in a new tab)
1 free high-res photo per day.
19. SplitShire(opens in a new tab)
Free, high quality stock photos by an Italian photographer.
20. ISO Republic(opens in a new tab)
High quality stock photos marketed to creatives.
21. Paul Jarvis(opens in a new tab)
Sign up to get 20 of Paul Jarvis’s top photos for free.
SYMBOLS + ICONS
Looking for symbols or icons to use on your website? Look no further.
22. Pixeden(opens in a new tab)
Tons of free icon sets, including weather icons, social icons, line icons, and many others.
23. Iconmonstr(opens in a new tab)
More than 2800 boldly graphic icons in a few different styles.
24. Captain Icon(opens in a new tab)
Over 350 free vector icons for mobile and web designs.
25. Linear Icons(opens in a new tab)
An icon font with 170 different icons to choose from.
26. Font Awesome(opens in a new tab)
A symbol font that allows you to add symbols to your websites.
27. Fontello(opens in a new tab)
Generates icon font packs.
28. flaticon(opens in a new tab)
Download vector icons or include icons as webfonts.
29. The Noun Project(opens in a new tab)
Search a noun, get a free symbol or icon.
30. Endless Icons(opens in a new tab)
Free icon library.
31. Perfect Icons(opens in a new tab)
Customize and optimize social media icons for your site.
32. iconSweets(opens in a new tab)
60 free vector Photoshop icons.
33. Round Icons(opens in a new tab)
Free quirky and professional icon bundles.
FONTS
Fonts are such a crucial part of design that they can be easy to overlook. Look here instead, and find the fonts to take your design to the next level.
34. Google Webfonts(opens in a new tab)
Add fonts to your website in just a few clicks.
35. typegenius(opens in a new tab)
Font pairing generator.
36. Font Squirrel(opens in a new tab)
Hundreds of totally free fonts.
37. Beautiful Web Type(opens in a new tab)
Check out a curated collection of the most beautiful Google Webfonts.
38. Lost Type(opens in a new tab)
Gorgeous pay-what-you-can fonts.
COLORS
Need help dialing in the best colors for your design? These color tools are at your service.
39. Material UI(opens in a new tab)
A gallery of Material Design and flat design colors to use in your designs.
40. Paletton(opens in a new tab)
Start with any color and get a palette (with 5 shades per color) based on a few different color scheme patterns: monochromatic, adjacent, triad, tetrad, or custom.
41. Design Seeds(opens in a new tab)
Tons of great color palettes taken from photographs. You can search by keyword or for similar colors.
42. Adobe Color Wheel(opens in a new tab)
Choose from different types of color pairings and save your color palettes.
43. Material Palette(opens in a new tab)
Generate a color palette based on 2 colors.
44. Flat UI Color Picker(opens in a new tab)
The name says it all.
45. Flat UI Colors(opens in a new tab)
Ditto.
46. Bootflat(opens in a new tab)
Flat color picker.
47. Coolors(opens in a new tab)
Color palette generator.
48. Skala Color(opens in a new tab)
Free color picker download.
49. BrandColors(opens in a new tab)
Check out the exact colors that major brands use.
50. 0 to 255(opens in a new tab)
Find the perfect color variation you’re looking for.
51. Colour Lovers(opens in a new tab)
Browse user color palettes and add your own to the community.
52. Palette for Chrome(opens in a new tab)
Generates color palettes based on images.
BACKGROUNDS + TEXTURES
Photos, fonts, and colors aren’t the end of a design—you also need backgrounds and textures to holds them all together. Find yours with these tools.
53. Pattern8(opens in a new tab)
Tons of funky, bold, and bright repeating patterns to choose from.
54. Repeat-X Repeat-Y(opens in a new tab)
Amazing repeating patterns from around the world.
55. Texture King(opens in a new tab)
All the textures you could ever want: grunge, rust, plaster, concrete, dirt, and many more.
56. Patternico(opens in a new tab)
Create your own patterns using Font Awesome icons. Customize the background color, canvas size, and shape transparency.
57. Subtle Patterns(opens in a new tab)
Free downloadable patterns.
58. Lost and Taken(opens in a new tab)
Free textures in a ton of categories, including cardboard, stone, metal, bubbles, seamless, and more.
59. BG Patterns(opens in a new tab)
Create seamless patterns with customizable colors, shapes, and more.
UI (USER INTERFACE) KITS/GUIDES
Web design is more than just visual appeal. The way a site’s user interface “feels” to the user is also a critical factor. These tools will help make sure your own UI design is on point.
60. 55+ Elements Free UI Kit(opens in a new tab)
A clean, modern UI kit. Be sure to search around on the Behance website for tons of great resources from other designers!
61. Oh no, not another UI Kit(opens in a new tab)
A simple, flat, open source mobile and web UI kit that comes as a PSD file.
62. PSD Booster Freebies(opens in a new tab)
Tons of great Photoshop freebies, including UI kits, themes, and more.
63. Material Design Guidelines(opens in a new tab)
The official guide to Google’s Material Design standards.
Web Development Resources
After a website is designed, it needs to be developed! Whether you’re working on both sides of the process (designing AND building a site), or building a site based on someone else’s designs, these developer tools will help you make that design a virtual reality.
DOMAIN NAME SEARCH ENGINES
Domain names are at the heart of a website—they’re the direct address where users can find your site online. But the internet is a crowded place, and it can be hard to find the exact domain name you want. These tools will help you find out of a name you want is available, and to create one that IS if your first choice isn’t.
64. Namemesh(opens in a new tab)
A powerful domain name search engine that helps you find domains that are short, fun, common, similar, and various other qualifiers.
65. Nameboy(opens in a new tab)
Enter a keyword or two and get a list of available domains that incorporate them.
66. Panabee(opens in a new tab)
Describe what you want in two words and Panabee will generate a list of potential domain names.
67. Impossibility(opens in a new tab)
Generate random domain names based on one word.
68. LeanDomainSearch(opens in a new tab)
Search for a domain name by keyword.
FRAMEWORKS, TEMPLATES, CODE PACKS, + THEMES
Sometimes you’ll need to code every part of a website from scratch—but sometimes you won’t. Here’s a list of frameworks, templates, code packs, and themes you can use to cut down on heavy lifting.
69. WP-Flex(opens in a new tab)
A blank, responsive WordPress theme boilerplate that follows the official WordPress Codex best practices and requirements.
70. Foundation(opens in a new tab)
An advanced responsive framework that’s one of the most popular out there.
71. Ionic(opens in a new tab)
Create mobile apps using the web technologies you know and love.
72. Initializr(opens in a new tab)
Quickly generate a template based on HTML5 Boilerplate.
73. Materialize(opens in a new tab)
A modern, responsive framework based on Google’s Material Design specifications.
74. WordPress Plugin Boilerplate(opens in a new tab)
If you want to create WordPress plugins, the Plugin Boilerplate is a standardized, object-oriented starting point.
75. Front-end Boilerplate(opens in a new tab)
A basic starting point for creating your websites so you don’t have to recreate everything from scratch each time.
76. HTML5 Boilerplate(opens in a new tab)
The first and the best. Free HTML5 boilerplate code.
77. HTML5 UP(opens in a new tab)
Free fully responsive HTML5 template.
78. 1 Line CSS Grid Framework(opens in a new tab)
A framework for CSS that’s only 1 line long!
79. 960 Grid System(opens in a new tab)
A Skillcrush favorite.
80. Starkers for WordPress(opens in a new tab)
A basic template for developing your first WordPress theme.
81. Barebones for WordPress(opens in a new tab)
Free WordPress template for developers.
82. Underscores(opens in a new tab)
WordPress template for building out a brand new theme.
83. Sage for WordPress(opens in a new tab)
A WordPress starter theme based on HTML5 boilerplate and Bootstrap.
84. Whiteboard for WordPress(opens in a new tab)
A clean, basic WordPress theme for developers.
85. Bootstrap(opens in a new tab)
A responsive HTML, CSS, and JS framework.
86. Bootswatch(opens in a new tab)
Free themes for Bootstrap.
CODE STYLE GUIDES
You can’t start coding without learning basic skills, but once you have those skills nailed it’s time to learn how to code artfully. These guides will teach you best coding practices that will elevate your work beyond the basic level.
87. Web Field Manual(opens in a new tab)
A collection of resources, best practices, inspiration, and reference materials for modern coding. There are also sections filled with tools and additional resources and language-specific information.
88. Google Developers Web Fundamentals(opens in a new tab)
A comprehensive resource for web development best practices, right from Google. Perfect for both new developers and those who want to make their projects better.
89. Deployments Best Practices(opens in a new tab)
Before you deploy a website or app, be sure to check out these best practices to make sure everything goes smoothly.
90. GitHub(opens in a new tab)
GitHub’s very own code style guide.
91. Google(opens in a new tab)
Google’s code style guide.
92. Mozilla(opens in a new tab)
A code style guide from the pros at Mozilla.
CODE VALIDATION
Finished with that website? Not so fast. Before marking that project “done,” use these tools to wrap up loose ends in your code and check to see if you’re meeting standards of accessibility, style, and industry best practices.
93. w3.org(opens in a new tab)
94. Web Design Group HTML Validator(opens in a new tab)
95. Validome(opens in a new tab)
96. Validator.nu(opens in a new tab)
97. Code Beautify(opens in a new tab)
98. JSLint(opens in a new tab)
99. Free Formatter
Web Developer Checklist Tools
Are you a newer web developers in town? Headaches searching and finding different steps for creating website. Search end here Toptal has recently launched a Web Developer Checklist that provides a series of website launch steps that are critical for a successful project including best practices, security, tagging, analytics, and more.
