Quantcast

Our Secret Stash of Awesome Free Website-Building Tools

 

29websitebulding

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

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

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

About the author: Skillcrush

Skillcrush, your ‘how to get started guide to tech.’ You know that mastering technology is key to future success. Increase your tech know-how in collaborative online classes with real-live instructors there to help.

You are seconds away from signing up for the hottest list in New York Tech!

Join the millions and keep up with the stories shaping entrepreneurship. Sign up today.