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!
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.
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.
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.
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.
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!
DataTables – The go-to table plug-in for jQuery.
AlloyUI – Built on top of YUI3, AlloyUI uses Bootstrap to provide a kickass API.
AngularJS – A toolset for building a framework that's perfect for your project. It integrates amazingly with other libraries.
Modernizr – An awesome group of tests that check out what's going on when your site launches on different browsers.
Opera Dragonfly – No install required, Opera Dragonfly lets you walk through your code and really take a look at what's going on.
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.
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.
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.