The ultimate front-end developer toolkit

Take a look at our extensive front-end developer toolkit. Think there is anything we are missing, add away!

 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.

 

👇👇👇 👇👇👇 👇👇👇

 

The list in words

Education & Courses

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.

Editors

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.

Versioning

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.

Cloud Storage

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.

Libraries & Plugins

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.

Testing & Debugging

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.

Must-have browser add-ons

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.

Online tools

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.

Have you checked out these templates?

Retrospective meetings

Retrospective meeting template

Scrum Task Board

Scrum weekly planning template

Venn diagram

Venn diagram template

Leave a comment