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 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
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.
PHOTOS
Death to the Stock Photo
Get on their email list and get their free photo packs in your inbox once a month.
Little Visuals
If you join their list, you’ll get 7 free high-res photos emailed to you once a week.
New Old Stock
Get free, vintage photos from public archives.
Cupcake
Free, high-res photos by Jonas Nilsson Lee.
Pexels
10 new free stock photos every day.
Magdeleine
1 free high-res photo per day.
SplitShire
Free, high quality stock photos by an Italian photographer.
ISO Republic
High quality stock photos marketed to creatives.
Paul Jarvis
Sign up to get 20 of Paul Jarvis’s top photos for free.
PHOTO EDITORS & DESIGN SOFTWARE
Pixlr
Edit images right in your browser.
Canva
Amazingly easy graphic design software that anyone can use. The search and drag function is so simple and helpful!
Easel.ly
Awesome free infographic templates.
SYMBOLS + ICONS
Font Awesome
A symbol font that allows you to add symbols to your websites.
Fontello
Generates icon font packs.
flaticon
Download vector icons or include icons as webfonts.
The Noun Project
Search a noun, get a free symbol or icon.
Endless Icons
Free icon library.
Perfect Icons
Customize and optimize social media icons for your site.
iconSweets
60 free vector Photoshop icons.
Round Icons
Free quirky and professional icon bundles.
FONTS
Google Webfonts
Add fonts to your website in just a few clicks.
typegenius
Font pairing generator.
Font Squirrel
Hundreds of totally free fonts.
Beautiful Web Type
Check out a curated collection of the most beautiful Google Webfonts.
Lost Type
Gorgeous pay-what-you-can fonts.
COLORS
Adobe Color Wheel
Choose from different types of color pairings and save your color palettes.
Material Palette
Generate a color palette based on 2 colors.
Flat UI Color Picker
The name says it all.
Flat UI Colors
Ditto.
Bootflat
Flat color picker.
Coolors
Color palette generator.
Skala Color
Free color picker download.
BrandColors
Check out the exact colors that major brands use.
0 to 255
Find the perfect color variation you’re looking for.
Colour Lovers
Browse user color palettes and add your own to the community.
Palette for Chrome
Generates color palettes based on images.
BACKGROUNDS + TEXTURES
Subtle Patterns
Free downloadable patterns.
WebTexture
Free stock textures.
The Pattern Library
Quirky, fun, high-quality patterns.
DEVELOPMENT
DOMAIN NAME SEARCH ENGINES
Impossibility
Generate random domain names based on one word.
LeanDomainSearch
Search for a domain name by keyword.
FRAMEWORKS, TEMPLATES, CODE PACKS, AND THEMES
HTML5 Boilerplate
The first and the best. Free HTML5 boilerplate code.
HTML5 UP
Free fully responsive HTML5 template.
1 Line CSS Grid Framework
A framework for CSS that’s only 1 line long!
960 Grid System
A Skillcrush favorite.
Starkers for WordPress
A basic template for developing your first WordPress theme.
Barebones for WordPress
Free WordPress template for developers.
Underscores
WordPress template for building out a brand new theme.
Sage for WordPress
A WordPress starter theme based on HTML5 boilerplate and Bootstrap.
Whiteboard for WordPress
A clean, basic WordPress theme for developers.
Bootstrap
A responsive HTML, CSS, and JS framework.
Bootswatch
Free themes for Bootstrap.
CODE STYLE GUIDES
GitHub
GitHub’s very own code style guide.
Google’s code style guide.
Mozilla
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.
w3schools.com
Web Design Group HTML Validator
Validome
Validator.nu
Code Beautify
JSLint
Free Formatter
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!
Reprinted by permission.
Image credit: CC by Serge Kijj
