Learning how to be a web designer or web developer might sound hard (pro tip: it’s not as hard as you might think!), but one big upside is the amount of free tools and resources that exist to help you do the work. To show you just how many tools are only a click away, we assembled this list of 63 free resources 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. And—when you’ve gone through everything listed here—check out our updated version with 36 more free tools, bringing the total to a whopping 99.

Table of Contents

• Web Design Resources

  • Newsletter Lists
  • Photos
  • Photo Editors + Design Software
  • Symbols + Icons
  • Fonts
  • Colors
  • Backgrounds + Textures

• Web Development Resources

  • 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.

(back to top)

Newsletter Lists

1. Creative Market

Before you do anything else, go get on the Creative Market newsletter list. Once a week, you’ll get an email packed with 5 free downloads, including everything from patterns and fonts to templates and themes.

(back to top)

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.

2. Death to the Stock Photo
Get on their email list and get their free photo packs in your inbox once a month.

3. Little Visuals
If you join their list, you’ll get 7 free high-res photos emailed to you once a week.

4. New Old Stock
Get free, vintage photos from public archives.

5. Cupcake
Free, high-res photos by Jonas Nilsson Lee.

6. Pexels
10 new free stock photos every day.

7. Magdeleine
1 free high-res photo per day.

8. SplitShire
Free, high quality stock photos by an Italian photographer.

9. ISO Republic
High quality stock photos marketed to creatives.

10. Paul Jarvis
Sign up to get 20 of Paul Jarvis’s top photos for free.

(back to top)

Photo Editors + Design Software

Once you have the photos and images you need for your design, edit and optimize them with these editor tools.

11. Pixlr
Edit images right in your browser.

12. Canva
Amazingly easy graphic design software that anyone can use. The search and drag function is so simple and helpful!

13. Easel.ly
Awesome free infographic templates.

(back to top)

Symbols + Icons

Looking for symbols or icons to use on your website? Look no further.

14. Font Awesome
A symbol font that allows you to add symbols to your websites.

15. Fontello
Generates icon font packs.

16. flaticon
Download vector icons or include icons as webfonts.

17. The Noun Project
Search a noun, get a free symbol or icon.

18. Endless Icons
Free icon library.

19. Perfect Icons
Customize and optimize social media icons for your site.

20. iconSweets
60 free vector Photoshop icons.

21. Round Icons
Free quirky and professional icon bundles.

(back to top)

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.

22. Google Webfonts
Add fonts to your website in just a few clicks.

23. typegenius
Font pairing generator.

24. Font Squirrel
Hundreds of totally free fonts.

25. Beautiful Web Type
Check out a curated collection of the most beautiful Google Webfonts.

26. Lost Type
Gorgeous pay-what-you-can fonts.

(back to top)

Colors

Need help dialing in the best colors for your design? These color tools are at your service.

27. Adobe Color Wheel
Choose from different types of color pairings and save your color palettes.

28. Material Palette
Generate a color palette based on 2 colors.

29. Flat UI Color Picker
The name says it all.

30. Flat UI Colors
Ditto.

31. Bootflat
Flat color picker.

32. Coolors
Color palette generator.

33. Skala Color
Free color picker download.

34. BrandColors
Check out the exact colors that major brands use.

35. 0 to 255
Find the perfect color variation you’re looking for.

36. Colour Lovers
Browse user color palettes and add your own to the community.

37. Palette for Chrome
Generates color palettes based on images.

(back to top)

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.

38. Subtle Patterns
Free downloadable patterns.

39. WebTexture
Free stock textures.

40. The Pattern Library
Quirky, fun, high-quality patterns.

(back to top)

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.

(back to top)

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.

41. Impossibility
Generate random domain names based on one word.

42. LeanDomainSearch
Search for a domain name by keyword.

(back to top)

Frameworks, Templates, Code Packs, and 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.

43. HTML5 Boilerplate
The first and the best. Free HTML5 boilerplate code.

44. HTML5 UP
Free fully responsive HTML5 template.

45. 1 Line CSS Grid Framework
A framework for CSS that’s only 1 line long!

46. 960 Grid System
A Skillcrush favorite.

47. Starkers for WordPress
A basic template for developing your first WordPress theme.

48. Barebones for WordPress
Free WordPress template for developers.

49. Underscores
WordPress template for building out a brand new theme.

50. Sage for WordPress
A WordPress starter theme based on HTML5 boilerplate and Bootstrap.

51. Whiteboard for WordPress
A clean, basic WordPress theme for developers.

52. Bootstrap
A responsive HTML, CSS, and JS framework.

53. Bootswatch
Free themes for Bootstrap.

(back to top)

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.

54. GitHub
GitHub’s very own code style guide.

55. Google
Google’s code style guide.

56. Mozilla
A code style guide from the pros at Mozilla.

(back to top)

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.

57. w3schools.com

58. Web Design Group HTML Validator

59. Validome

60. Validator.nu

61. Code Beautify

62. JSLint

63. Free Formatter

(back to top)

Ready to combine these tools with the skills you need to make money in tech? Check out our programs page to find the Skillcrush Blueprint course that’s right for you. In just three months you can be qualified to start working on the web.