29
When I first started learning to code, I remember feeling overwhelmed by 2 things:
- everything I didn’t know
- all the possibilities
When I built my first simple, one-page website, I saw the world of tech was opening up in front of me. What?! I can put ANY of these fonts on here? You mean I can just add an About page if I want one? You’re telling me I can embed a video??
I was ecstatic! And I felt so powerful.
At the same time, I was overwhelmed with everything out there. Sometimes it seemed like there were so many possibilities, I didn’t even know where to start. Should I spend a week trying to create my own social media icons? Or maybe I should focus on optimizing my site for different browsers?!
Now that I’ve been immersed in the world of tech a bit longer, I’m learning something. Even the pros can get overwhelmed by all the different elements that go into building a website from scratch. And do you want me to let you in on a little secret? They don’t even do it from scratch!
It’s true! In the tech industry, it’s common to rely on all the resources already out there to make your web designs come to life. The trouble is deciding which resources you can trust. Will this plugin break my site? Is this font download even legal?!
Well, you can stop worrying. I asked our team and scanned some awesome lists (like this one from The Next Web!) to create a curated list of the best FREE resources for building websites from scratch.
And you don’t even have to worry about remembering them all. Bookmark this page, and check back every time you get to a new phase of creating your website.
And if you think I missed something, let me know! I’d love to see this list grow!
DESIGN
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.
PHOTOS
Get on their email list and get their free photo packs in your inbox once a month.
If you join their list, you’ll get 7 free high-res photos emailed to you once a week.
Get free, vintage photos from public archives.
Free, high-res photos by Jonas Nilsson Lee.
10 new free stock photos every day.
1 free high-res photo per day.
Free, high quality stock photos by an Italian photographer.
High quality stock photos marketed to creatives.
Sign up to get 20 of Paul Jarvis’s top photos for free.
PHOTO EDITORS & DESIGN SOFTWARE
Edit images right in your browser.
Amazingly easy graphic design software that anyone can use. The search and drag function is so simple and helpful!
Awesome free infographic templates.
SYMBOLS + ICONS
A symbol font that allows you to add symbols to your websites.
Generates icon font packs.
Download vector icons or include icons as webfonts.
Search a noun, get a free symbol or icon.
Free icon library.
Customize and optimize social media icons for your site.
60 free vector Photoshop icons.
Free quirky and professional icon bundles.
FONTS
Add fonts to your website in just a few clicks.
Font pairing generator.
Hundreds of totally free fonts.
Check out a curated collection of the most beautiful Google Webfonts.
Gorgeous pay-what-you-can fonts.
COLORS
Choose from different types of color pairings and save your color palettes.
Generate a color palette based on 2 colors.
The name says it all.
Ditto.
Flat color picker.
Color palette generator.
Free color picker download.
Check out the exact colors that major brands use.
Find the perfect color variation you’re looking for.
Browse user color palettes and add your own to the community.
Generates color palettes based on images.
BACKGROUNDS + TEXTURES
Free downloadable patterns.
Free stock textures.
Quirky, fun, high-quality patterns.
DEVELOPMENT
DOMAIN NAME SEARCH ENGINES
Generate random domain names based on one word.
Search for a domain name by keyword.
FRAMEWORKS, TEMPLATES, CODE PACKS, AND THEMES
The first and the best. Free HTML5 boilerplate code.
Free fully responsive HTML5 template.
A framework for CSS that’s only 1 line long!
A Skillcrush favorite.
A basic template for developing your first WordPress theme.
Free WordPress template for developers.
WordPress template for building out a brand new theme.
A WordPress starter theme based on HTML5 boilerplate and Bootstrap.
A clean, basic WordPress theme for developers.
A responsive HTML, CSS, and JS framework.
Free themes for Bootstrap.
CODE STYLE GUIDES
GitHub’s very own code style guide.
Google’s code style guide.
A code style guide from the pros at Mozilla.
CODE VALIDATION
Wrap up loose ends in your code by checking to see that it meets standards of accessibility, style, and industry best practices.
Web Design Group HTML Validator
And if you are so pumped about the idea of building a website, but you need to get some of those basic coding skills, look no further! In a Skillcrush Career Blueprint, you can learn all the skills you need to start making money as a web designer or developer in just 3 months.
Thanks again to The Next Web for curating such an awesome, comprehensive list for us to choose our favorites from!
Image credit: CC by Serge Kijj
