Freebie Friday: Five Free Resources for Web Designers

Welcome back! In this edition of Freebie Friday I will show you five free resources that web designers can take advantage of.  These are tools that help in both design and function of your websites.

1. Skeleton Development Kit

Skeleton is a responsive development kit with built in CSS3 rules to take care of many media queries right off the bat.  It is style agnostic, meaning there is no set template or design built in.  This will allow you to make your own design for the site while also being ready to go on desktop or mobile devices.

GET SKELETON

2. Subtle Patterns 

Subtle Patterns is a site with tons of...well, subtle patterns.  The patterns can be used for the background of your website.  Patterns are searchable by name, you can browse, or filter between light and dark patterns. Another great feature is being able to preview each pattern.  When you hover your cursor over a pattern you can click to see a preview of the background pattern on the site.  This gives you a better idea if the pattern will look good on a full page or not. 

SUBTLE PATTERNS

3. Google Fonts

Google Fonts is a great place to find free web fonts that you can use on your site.  There are over 600 fonts available from this resource.  Trying to find that perfect font for your site is made simple by Google's filtered criteria and font search on the left side.  You can also type in sample text to see exactly what your content will look like as an individual word, sentence, paragraph, or poster sized. 

GOOGLE FONTS 

4. CodePen

CodePen is a fantastic resource for front-end developers that helps with inspiration, education, and sharing.  CodePen features a live coding environment for users to test out ideas or edit and customize "pens" shared from other users.  You can follow users, favorite works, or comment. Sign up is free and the site is always a great resource. 

CODEPEN

5. CSS3 Generator

CSS3 Generator is a site that allows you generate CSS3 code by typing in parameters you want met.  If you need to do an animated transform such as a spinning box or a resize on scale or setting up text shadow, CSS3 Generator gives you the code after you type some basic information in. It's a useful tool to use so you don't have to remember all the syntax.

CSS3 GENERATOR