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


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

9 comments:

  1. This is such a great resource that you are providing and you give it away for free. I love seeing websites that understand the value of providing a quality resource for free. It is the old what goes around comes around routine. طراحی وب

    ReplyDelete
  2. Wow, co za świetne informacje o Światowym Dniu, to bardzo fajny post informacyjny. Dzięki za post. projektowanie stron internetowych

    ReplyDelete
  3. Thanks for sharing this information.

    Apptians is the Best Staffing Company in Delhi and top Resource Augmentation company in Delhi NCR, Noida, Faridabad, Gurgaon, India. Dedicated React JS Developers and React Native developers can be hired from Apptians.

    ReplyDelete
  4. Thanks for sharing this information.
    Biharapps is the best website design agency and mobile app development company in Dubai, UAE. Top andoid app developers and iOS app developers , web designers in Dubai, UAE and Software development company in Dubai, UAE. We are Digital Marketing Agency and SEO Company in UAE.

    ReplyDelete
  5. It's a very nice blog, I really like it.
    Jewellery By Mitali Jain is the best website to buy artificial jewellery, imitation jewellery, and artificial gold jewellery online and Jain Jewellery in Jaipur. They sell fancy and attractive products like Jhumka Earrings for the ears, gold rings for ladies for fingers, the latest gold Necklace design for the neck, Headgears(maangtikka) for the head, Bracelets for the wrist, for Mask and Glass chains for Mask and chains, Bookmark Jewellery for books, novels. They also have collections of Vintage Tresor, Summer Luna, Holy Mess, The Mashrab Jaal, Bookmark, and Rakhi Collection. Gift Cards and many more items like this.

    ReplyDelete