The ultimate front-end developer toolkit

 We are a team of developers and we’re always looking to improve our stack!

So with that in mind we have put together the ultimate front-end developer toolkit for all your front-enders out there. Our goal with this toolkit is to give you everything you need from project inspiration, planning and execution.

The board is fully editable. So if you think a product is missing (or you have one of your own to add) then go ahead and drop a link on the clickable board below and add your favorite tools into the developer toolkit.

 

👇👇👇 👇👇👇 👇👇👇

 

Treehouse – A juggernaut in the web development and design space. They have 1,000’s of hours of content and let students learn at their own pace. A 7-day free trial is standard and it starts at $25 per month.

Code Academy – Over 25 million people have learnt to code with Code Academy. The best part? It’s absolutely free!

Code School – From HTML/CSS, to Javascript, Ruby and everything in between. Their multiple pathways will get you coding in no time. Starts at $29 per month (monthly payments) and $19 per month if you pay a year up front.

Lynda – Acquired by LinkedIn a couple of years back, Lynda is forever expanding their portfolio of courses. With over 600 focused on software development they’re worth checking out.

Daily reads & referencing

CSS Tricks – It’s been around since 2007 and started out as all about (shock) CSS! Now though they cover it all when it comes to web design and development.
Smashing Magazine – Focused on quality not quantity, Smashing Magazine is a great place to check out the latest trends in web development.
Awwwards – Looking to see the best web development around? Check out Awwwards for some inspiration.
UX Booth – Covering it all from analytics, information architecture to design and accessibility, UX Booth is a great all-round resource to keep tabs on.
Teamtreehouse Blog – Their educational offering is pretty amazing and their blog isn’t too shabby either.
HTML5Please – Need to know if a HTML5, CSS (or anything else) feature is ready? Check it out here.

Frameworks

Foundation – A family of front-end frameworks that make design easy on responsive sites.

Bootstrap – This is Twitter’s baby. Utilising LESS CSS and managed through Github, it’s built by nerds for nerds.

Framework7 – Free, open source and fully focused on mobile HTML, CSS and Javascript frameworks.

Sublime Text 3 – One of the world’s best text editors for code.

Espresso – All about editing code on Mac. Write, code, design and publish.

Github – 21 million users all over the world. They must be doing something right. One of the easiest and collaborative ways to host your web development projects online.

Bitbucket – Built for professional teams, Bitbucket is a great alternative to Github.

iCloud – A solid storage solution from Apple, world renowned and has awesome support.

Dropbox – Their ‘invite friends and get more storage’ model was a hit and has gone down in growth hacking folklore. Their storage solutions are extremely stable and affordable too.

Google Drive – If you’re using Google products to manage your business Google Drive might be the storage solution for you. Great to keep everything centralised with the daddy of online solutions.

jQuery – A fast and feature-rich Javascript library that works across pretty much every browser.

HTML5 Boilerplate – Build fast web apps and sites with this package of web developer goodness.

Normalize.css – Render elements so they meet modern web development standards. The big boys like Twitter, Github, Soundcloud (and others) are using them, so you should too!

jQuery UI – User interface interactions, effects, widgets and themes built on the jQuery Javascript Library.

DataTables – The go-to table plug-in for jQuery.

YUI3 – The Yahoo! User Interface Library is an open-source Javascript library.

AlloyUI – Built on top of YUI3, AlloyUI uses Bootstrap to provide a kickass API.

JavascriptOO – A collection of javascript projects that you need to check out. The filters are amazing for reaching the projects you really want to see.

AngularJS – A toolset for building a framework that’s perfect for your project. It integrates amazingly with other libraries.

Vue.js – One to look at if your base HTML, CSS and Javascript knowledge is there. Super versatile and can handle app builds at any scale.

Modernizr – An awesome group of tests that check out what’s going on when your site launches on different browsers.

Firefox Developer Tools – Includes core tools such as Page Inspector, Web Console, Javascript Debugger and more.

Opera Dragonfly – No install required, Opera Dragonfly lets you walk through your code and really take a look at what’s going on.

JS Hint – Detect errors and potential problems in your Javascript code by running it through this page!

CSS Lint – Insert your CSS and they’ll tell you how great (or terrible) it is.

Stack Overflow – The go-to community for developers to ask their questions and get whatever they like answered.

Litmus – Optimise your emails across multiple devices.

Responsive Design Testing – Test your site by typing in your URL and hitting enter. It’s easy.

Colorzilla (Firefox) – Pick out the colors and more in Firefox

MeasureIt (Chrome) – A Chrome plugin to make sure your on-site measurements are right down to the last millimetre.

View Source Chart (Firefox) – Accelerated human processing of DOM and see more structure/sequence information on the go.

Empty Cache Button (Firefox) – Does exactly what it says, clear your cache with the touch of a button.

Ghostery (Chrome) – See who’s tracking you online.

Live Reload – No need to keep reloading with this one. Your CSS edits and image changes are applied in real-time.

What Font (Chrome) – Want to know what that awesome font is? This plugin shows you exactly what you’re looking at.

Window Resizer – If you want to see your site in different screen resolutions without the awkward guess work, this plugin let’s you do it.

Deekit – The go-to online whiteboard for online collaboration (if we do say so ourselves).

CSS Comb – If you’re looking to clean up your code and ‘make it beautiful’ then CSS Comb is your thang.

Fontello – Downloadable fonts and icons at your fingertips.

JSFiddle – Test your JavaScript, CSS, HTML or CoffeeScript online.

CSS Refresh – Monitor CSS-files on your webpage without having to refresh your browser.

Responsive – Test your response design online.

Spritecow – Work out your pixel locations with Spritecow.

IcoMoon – Free icons, what more could you ask for?

Json2HTML – Convert your Json objects to HTML.