Web Design & Development Tools

Gary Couse | gary.couse@cit.ie | @webdevcit

This page lists some tools and online services you might find useful for our classes. The appearance of a tool here is not necessarily an endorsement (and the lists below are in no particular order).

This page specifically lists desktop/laptop based apps. They are available online or as applications for Mac OS, Windows and/or Linux (as indicated below).

Free Text Editors

The following text editors are free (or provide a free version).

Atom Available for: Mac Windows Linux
Brackets Available for: Mac Windows Linux
GNU Emacs Available for: Mac Windows Linux
Visual Studio Available for: Mac Windows Linux
Text Wrangler Available for: Mac
Notepad Plus Available for: Windows

Paid Text Editors

The free text editors listed above are more than sufficient for your class work. However, the following may have features you find useful if you want to spend the money on them.

Sublime Available for: Mac Windows Linux
BBedit Available for: Mac
TextMate Available for: Mac
Coda Available for: Mac

FTP Clients

Many of the text editors listed above have built in FTP clients. However, you may want a dedicated client.

Filezilla Available for: Mac Windows Linux
Cyberduck Available for: Mac Windows

Web Fonts (Free)

These are websites that host, or allow you download, free web fonts.

Font Squirrel Available for: Web
Google Fonts Available for: Web
Adobe Edge Web Fonts Available for: Web

Sprite Generation

Create a single sprite image out of all the images on your page.

CSS Sprite Generator Available for: Web

Image optimisation

To speed up the downloading of your websites you can optimise the size of your images.

ImageOptim Available for: Mac Web

Code Quality & Validation

These services will check any code you submit to them to see if the code is valid. They can also be useful for recommending improvements to your code.

HTML

W3C HTML Validator Available for: Web
Dr. Watson Available for: Web

CSS

W3C Validator Available for: Web
CSSLint Available for: Web

JavaScript

JSLint Available for: Web
JSHint Available for: Web

Code Cleanup

These are websites that will automatically clean up the formatting of your HTML, CSS and/or JavaScript code. Some services also minify the code for faster loading.

Dirty Markup Available for: Web
Clean CSS Available for: Web

Online Backup

You need to have a rigorous backup policy for your assignment files (accidental loss of data is not considered a valid excuse for not submitting an assessment). Along with a regular physical backup (ideally to at least both an internal and external disk) you can also setup your work to be automatically copied to a cloud service. These are paid services but Dropbox also has a free basic account.

Dropbox Available for: Mac Windows Linux
SugarSync Available for: Mac Windows
Amazon Drive Available for: Mac Windows

CSS Preprocessors GUIs

These GUIs can simplify the use of preprocessors such as SASS or LESS.

Scout Available for: Mac Windows Linux
Koala Available for: Mac Windows Linux

Git GUIs

These GUIs can simplify the use of command line version control systems such as Git

GitKraken Available for: Mac Windows Linux
SourceTree Available for: Mac Windows
Gitup Available for: Mac

Browsers

You should test your websites on as many browsers as is reasonable. The list below (restricted to desktop browsers - you should also test on mobiles) would be sufficient for our purposes.

Chrome Available for: Mac Windows Linux
Firefox Available for: Mac Windows Linux
Safari Available for: Mac
Microsoft Edge Available for: Windows
Opera Available for: Mac Windows Linux

References

  1. https://developer.mozilla.org/en-US/Learn/Common_questions/Available_text_editors
  2. https://git-scm.com/downloads/guis
  3. http://webdevchecklist.com
  4. https://www.sitepoint.com/terrific-time-saving-css-tools/
  5. http://www.danstools.com
  6. Icons: https://Web.iconfinder.com/Sennerstad