Powerful open-source Web Editor optimized for Web Design

In this article we describe Step by Step How to install Brackets , a Powerful open-source Web Editor optimized for Web Design.  
Brackets is a FREE web editor fully written in Javascript, CSS3 and HTML5, and therefore extensible by a Web programmer like you. It comes with very cool features like a Quick Edit (you can edit the CSS3 & JS code just from  some HTML file, with no need at all to switch between different source files) , and a Live Preview , meaning that you can preview your Web App on the browser and run it from the code editor.
Brackets looks this way:

Powerful open-source Web Editor optimized for Web Design

To install Brackets , browse to Brackets and download the free designer :

Get the latest version to your machine:

After the installation, open the Brackets web designer and take a look to the Plugins that you can append to it: for example, look for the SPA AngularJS enhancements of this Web Designer, clicking the "Extensions Manager" button to the top right side :

Proceed to install all Plugins that you want, for instance, the "AngularJS for Brackets" and "Angular JS Snippets" ones.
A very useful feature of Brackets is the "Live Preview" , which allows us to immediately run the HTML5 page, and update it as you type code without hitting "save", without switching to the browser, and without refreshing it :

Another very powerful and useful feature is the "Quick Edit", mean to edit the CSS and script source files without switching to them, but placing the cursor on some HTML tag with CSS definitions, and right clicking  "Quick Edit" (Ctrl + E) :

You can then see the source file name (main.css) and edit the source code, without leaving the HTML file:

After you finish the editing, press "ESC" or click the "X" to close the dialog.
There is also a powerful "Search" engine:

Another useful thing is the thumbnail of the color or gradient as you hover over some HEX or RGB values:

You can also open the Developer Tools from Brackets:

Enjoy your modern and powerful Web code editor:

In this article we learned Step by Step How to install an optimized Web code editor and designer. 
Happy programming.....

      by Carmel Schvartzman

כתב: כרמל שוורצמן