Code Editors

HomeWeb Basics → Code Editors

To edit code (html, css, javascript, php, whatever, a code editor is requested. There are a lot of tools available, with less or more features. Here’s a list of some of the most used ones:


  • Browser-based online editor “Thimble” from Mozilla (see workshop)
  • ATOM (OSX, Windows, Linux) is a slim, but highly customizable code editor, favourite tool of many professional developer
  • SublimeText (OSX, Windows, Linux) Slim App, Coding only
  • Adobe Brackets (OSX, Windows), rich app, lots of features, nice interface

Dreamweaver comes with Adove CC. It does not matter which version of Dreamweaver is used, also DW of Adobe CS6, CS4 or lower will work well. Once installed, the the Dreamweaver interface should be cleaned up. The menu windows required for beginners are:

  • Tabbed together, horizontally below the document: Properties and Search
  • Tabbed together, vertically at the right: Files, CSS, Insert
  • Remove all others
  • Maximize the whole interface to over your entire screen
  • Mac users: do not move menu windows around, as this is highly inefficient. Unfloat and then tab all windows by dragging them to the border until a blue line appears, then release it, and for god’s sake leave all windows where they are
  • Save your new layout (Menü Window > Working Space > New Working Space)

That’s how “Drag & Dock” looks like:


That’s how clean the interface should look:


Setup Prefs:

Open the preferences menu (CMD-U). Most prefs can be left at the default values, but at least these two need some fiddling:

“New Document”

  • Standard document: HTML
  • Standard extension: .html (not .htm)
  • Standard doc type: HTML5
  • Standard encoding: Unicode/UTF-8

“Preview in Browser”

  • Click the + button and add one browser (Safari or Chrome/Firefox)
  • Click the +  button again and add your other browser
  • Set one as “Primary browser” and the other one as “Secondary browser” (doesn’t matter which one is which one)
  • Check the “Browsers” page for more browser details

Setup a project (site):

First make shure that you have established a web folder somewhere where that folder will stay (desktop not recommended). As Dreamweaver will be pointed to that local folder, renaming or relocation of it will break the connenction to Dreamweaver.

Go into the “Files” menu at the right and click on “Manage Sites” or go down the drop-down menu there. Click on “New Site”. Givethat site a meaningful name. This name is just internal for your site management, has nothing to do with the name or the title of your website. The select your local folder by clicking on the small folder icon at the right. This is where you connect DW to your local files.

No server connection (FTP) will be required for the project, as you’ll edit your entire site with your CMS login in your browser.

HomeWeb Basics → Code Editors