Monday, December 15, 2014

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



Powerful open-source Web Editor optimized for Web Design




To install Brackets , browse to Brackets and download the free designer :
Powerful open-source Web Editor optimized for Web Design 1

Get the latest version to your machine:

Powerful open-source Web Editor optimized for Web Design 2

Powerful open-source Web Editor optimized for Web Design 3


Powerful open-source Web Editor optimized for Web Design 5

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 :

Powerful open-source Web Editor optimized for Web Design 7

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 :

Powerful open-source Web Editor optimized for Web Design 8

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) :

Powerful open-source Web Editor optimized for Web Design 9

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

Powerful open-source Web Editor optimized for Web Design 10

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

Powerful open-source Web Editor optimized for Web Design 11

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

Powerful open-source Web Editor optimized for Web Design 12

You can also open the Developer Tools from Brackets:

Powerful open-source Web Editor optimized for Web Design 13


Powerful open-source Web Editor optimized for Web Design 14

Enjoy your modern and powerful Web code editor:

Powerful open-source Web Editor optimized for Web Design 15




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

      by Carmel Schvartzman


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