course notes 2016/17

online editors & browser add-ons

Sep 21st 2016

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.

thimble (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.



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.

✱ Screengrab

This Firefox add-on is a quick option to take screenshots of your website as full pages. Just right-click on the page you want to grab and look in the “Screengrab” menu.



✱ Full Page Screen Capture

This is the simplest way of taking a full-page screenshot – it’s an add-on for Chrome (chrome add-ons also work in Vivaldi) and it has this one single function. Perfect, quick & easy :)


Comments are closed.