Have You Met…Brackets?

Update: Software Downloads can now be accessed under the ‘Software Mentioned’ Tab to the right.

If you want to build a website, there are so many tools out there today it can be quite overwhelming to know where to begin. If you know you wish to build one from scratch that narrows down the options to a degree, but still leaves you with a handful of tools both paid and free. If you’d like something that’s free, lightweight (both in size and loading capability) that’s easy to use, but still has the optional capabilities of the more powerful tools (e.g: File management, syntax highlighting etc). Enter Brackets, Adobe’s third consecutive web development (next to Dreamweaver & Muse), this time being an MIT Licensed Open Source ‘Inception’ editor that’s perfect for HTML, CSS and Javascript that’s built in…HTML, CSS and Javascript!

The base system is very straightforward to use and will automatically highlight in your relevant language as soon as you open it’s respective tag (e.g: if you start with <html>,  it’ll colour code the way until it reads the closing </html> tag.  If you slip another language tag in such as <?php xxx ?> or <% you %>,  it’ll colour code the contents differently for you). You can turn this option off of course if you prefer it in all black (or whatever colour you want should you customise source code). It also has other helpful features such as auto indentation,  auto closing tag writing  (unless you self close a tag with  />) will offer code suggestions for HTML,  CSS and java script tags,  properties,  variables and classes (including the ones you declared before your current line) out of the box. To make a feature hattrick, Brackets also allows for in-browser live preview (literally, as you type a paragraph in HTML, it’ll render on a webpage immediately).  The only browser currently supported is Google Chrome, but there may be further support for other browsers in the future. There’s also a current limit to HTML/CSS only in live preview with Javascript commands needing a refresh in Chrome to take effect. If you’re writing a scripting page with extensions such as PHP or ASP, you’ll need to save your project on a server and link this up in Brackets’ settings. Hopefully in future versions this will also improve.

If that isn’t enough for you,  this can be expanded and enhanced through add ons written by people like yourselves for free.

Once you’ve written your file,  if you need to create another or link one together,  you’ll be able to find and navigate to them using the built in file manager on the left (building and managing your project for this also allows suggestions for relative referencing in your languages such as src=”xyz” properties  or include(‘abc’) ; commands.

With Brackets being an Adobe based product,  it wouldn’t be the same without a little bit of integration into their ecosystem. Since earlier versions,  the use of Photoshop files has been supported (although this could well be usurped with the new UX design software coming out),  allowing you to design layouts for pages in Photoshop and then extract their properties as CSS elements in Brackets for the actual construction of your pages.

With so many premium style feature on offer for free,  having Adobe’s seal of approval (which has is a big deal with their current reputation)  and the ability to tweak it to your hearts content as you please,  I would call downloading this a no-brainer if you’re looking to try website or web app development,  be you a newcomer to code or a seasoned veteran.

But of course, as with all reviews  it’s not just my opinion you should rely on.  If you’ve used Brackets before,  what was your experience of it? Feel free to drop a comment below.

“Code is poetry” as WordPress popularly publicise, so write it well and tell the world your story.



Have your say

This site uses Akismet to reduce spam. Learn how your comment data is processed.