Essential Free Tools & Resources for New Front-end Web Developers

As a new front-end web developer you’ll find that there’s a lot to know! Below is a list of tools and resources that I frequent on a regular basis.

Reference Sheets

W3School HTML – comprehensive HTML reference guide.

Codrops CSS – comprehensive CSS reference guide.

SASS Cheat Cheet – comprehensive SASS reference guide.

Typography & Fonts

Ionicons – My favourite icon font. You’ll find everything you need here from special characters to social media logos.

Font Awesome – Scalable vector icons.

Google Fonts – A massive resource for fonts you can add to your project.

TypeWonder – test fonts on a live website.

CSS Tricks – HTML Entities and Special Characters – For when you forget that an Ampersand is &


Flat UI Colours – An easy-to-use resource for beautiful colour selections.

Simple Flat Colour Selector – Another easy-to-use colour reference.


Visual Studio – Free Download. Highly customizable code editor.

CodePen – Quickly test out your HTML and CSS live. No quickly test out some ideas or do some tests. No signup necessary. Get stared by Clicking Create → New Pen.

CSS Generators

Animate CSS – For ready-to-go CSS Animations.

CSS3 Generator – Nice tool that’ll help with changing Border Radius, Box Shadow, Gradients, Outlines, Transitions and more.


Templated – A collection of simple CSS, HTML5 and Responsive site templates that are released free under Creative Commons. Great for inspiration or to kick start a project.



Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: