course notes 2015/16

online editors & browser add-ons

Sep 24th 2015


In addition to the tools already mentioned – there are a whole lot more to give you a helping hand ;) There will be a few more additional bits which we will talk about in class ~ for now, a few to get started with.

online code editors

Instead of coding via a standalone app – you might fancy trying out one of these online code editors: (Mozilla)

Thimble is an online editor with built in preview and publishing options – making it the perfect tool for learning your first bits of HTML and CSS. It can also be useful for testing individual elements or just have a play :)

You can choose to have hints enabled which will highlight any coding errors as you type. Text size for coding is adjustable in a beautifully clean 2 column interface making it a breeze to use. (Lea Verou)

Dabblet is another beautiful online editor with a split view, created for testing snippets of HTML and CSS code. You can customise the window split, use keyboard shortcuts and it also integrates with github.

The editor is populated with a gradient background via CSS and ready to go. You can use the commented out HTML code snippet to get started ~ easy :) (Chris Coyier)

Codepen also uses a split view which shows 3 code panels in the first column and a live preview in the second column. You can also save your code and share it with others via the unique URL of your edit. This a very handy for troubleshooting and team work. So if you get stuck – try reproducing your problem in codepen and post the link :)

codepen (Remy Sharp)

JS Bin was built by Remy Sharp and is completely open source and available You can also follow @rem on Twitter where he’ll tweet about JavaScript, HTML 5 and other such gems.

jsbin (Petr Krontorád)

This editor is no longer being developed but is still very popular as it allows for project management as well as a large number of languages.



Koding aims to deliver quite an amazing platform: code editing, team work, project management and more. Currently still in beta – I’ve only had a quick look myself so far ~ it looks very promising. The built in community and customisation options are brilliant ~ definitely worth keeping an eye on ;)


browser add-ons

No web designer should be without a collection of add-ons and testing tools ~ there are plenty out there, more than I can mention here. But there are some which are hugely popular, so here are few which you should a least try out to see how they will fit your workflow ;)

✱ FireFTP (Mime Čuvalo)

This is an excellent add-on for Firefox which will allow you to use the browser to upload files to your server. It has been around for years and remains hugely popular with beginners and pros alike. It is the quickest and easiest tool to get to grips with FTP.

This remains one of my favourites ~ you should also check out the project’s page with more info and the charity donations, such a great tool with a wonderful effort by its author.
In case you get stuck – here’s a tutorial :)


✱ Web Developer Toolbar (Chris Pederick)

This is by far one of the most popular toolbar ~ it comes with a huge number of functions which will allow you to view, check, test and troubleshoot your code. If you perform a search for dev toolbars – you will find that there are plenty with a similar names, and even similar options – but this one is by far the best, the one & only :)


✱ Firebug

Firebug is particularly popular with developers and allows you to test and tweak your code. You can inspect your HTML and CSS as well as debug your JavaScript.


✱ Awesome Screenshot

Another brilliant screengrab tool which allows you various options to capture what’s visible in your browser window. Once you have taken you screenshot you will also have the option of annotating your image, sharing it immediately or saving it locally.


Comments are closed.