Brackets is  new desing for text editor with an open-source editor 
You can find the github repository : https://github.com/adobe/brackets
And Offical web page  is  : http://brackets.io/

![](https://i.ytimg.com/vi/luZGvIniZW8/maxresdefault.jpg)

>We can use  with brackets HTML, CSS, and  JS ( JavaScript ) for  web development  or edit supported files with  brackets  app on your destktop 

>Brackets  creators is Adobe Systems  Comp.  and they  licensed  the program under the "MIT License".

Where can ı download Brackets  

Here is offical download link 
`https://github.com/adobe/brackets/releases/download/release-1.11/Brackets.Release.1.11.msi`



Step by Step installation guide :

Step 1 :

After Install Run Brackets.Release.1.11.msi

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511868180/intxkhchlhnn76ryg03n.png)

It will be intalling your `C:\Program Files (x86)\Brackets\`

After Install you can see the program on your Menu and Desktop Short Link 
![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511868474/erapfllkjectmby2p7dk.png)


and after install first run you must to give some permissions ( give permission work for health )

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511868404/fw12lifpgbfyjpod24sc.png)

here is after first run screen :

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511868590/lb9qu6ypxxtfemxmnlwj.png)


here is Menü > File 
![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511868709/xdvnt4qmiob7l7p0d3l2.png)

You can use shortcust :

New File : Ctrl+N
Open File : Ctrl+O
Save File : Ctrl+S
Live Preview : Ctrl+Alt+P
and more you can see...



Now i will show you Live Preview how is work :

if you can edit any file .HTML .JS *.* 

you see this warning firstly 

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511868877/pk5aujbq7knq4h3cyed0.png)

we will try now open GETTING STARTED WITH BRACKETS index.html 

and Try to Ctrl+Alt+p ( livepreview ) 
it works on your browser :
`http://127.0.0.1:59471/index.html`
and  which browser on your default browser you can chooise ( My prefer is Chrome ) 

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511869116/wqirqbjfub2fgh9wqblq.png)


If the livepreview problems you have Please visit 
[HERE](https://github.com/adobe/brackets/wiki/Troubleshooting#livedev)
`https://github.com/adobe/brackets/wiki/Troubleshooting#livedev`

If you find any bug or Issue you can report it and contribution to development for brackets

Here is  How to report an Issue Lınk :
`https://github.com/adobe/brackets/wiki/How-to-Report-an-Issue`

You can CONTRIBUTING Brackets with send : Github submitting a pull request

Here : 
`https://github.com/adobe/brackets/blob/master/CONTRIBUTING.md`

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511869987/kjuxkc5h1zcbzkvxnfwp.png)



and Brackets Suppport lo Install extensions or you can develop an extensions for brackets

you can find here extensions  list :

`https://registry.brackets.io/`

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511869476/ytzmnq3fmhmqeeuup5ne.png)

More than +40 extensions  oın the list and what you need you can find .

Brackets provides :
* Quick Edit ( Supported Files )
* Quick Docs
* Live Preview ( All Browsers )
* Install Extensions   ( Free )
* Open source  ( Github Repository )
* Extensibility

brackets supported languages : 

34 Languages you can see here 

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511869758/vfxxj0pvuel9lybwieng.png)
after language selection

we can show you how is works with htlm and php details and add one pluging for ease of use 

Ex.1![1.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511900378/bdw7s9gd0jynqo3smp2j.png)


Create New File 

![2.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511900405/lshq0kfqjrgq2lylbj2d.png)

and save it `test.html`

![3.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511900441/rk1pq4tswhspi5jkxdn5.png)

you can see down right side of  brackets one small menu you can prefer which language you can use 

and then when you can start write something  As you can see, the program has its own autocomplete feature. It's awesome for beginners for sure !

![4.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511900704/ujyakligioa9r2rgvm5u.png)

after autocomplete the green warnings ( not warnings) shows that it has the correct coding format.
you can go on means 
![5.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511900713/ffzawbashj4yxipvvl5d.png)
we add more code's the programs develops it automatically aligns you can see below 

![6.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511900813/fn1hdnjtlvxan4l3o54a.png)

![7.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511900878/lpfk2qft4jo3uq7qgjrx.png)

if want to try this page everything is correct or not short cut Ctrl+Alt +P it shows how is going 


or you can prefer Live Preview mode  (open additional copy of Chrome using a separate browser section ) 
![8.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511900887/ojqsdxn5bbfi4xusfpjq.png)

If you did something wrong, the Brackets will show it to you with a red marker.

![9.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511901099/fem3aade0jsw1kcozwqo.png)

Now I want to install an add-on that I will show you. how is install ?

> extension for PHP code in the Brackets editor  Source : https://github.com/Brackets-PHP/Brackets-PHP-SmartHints

![10.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511901177/rfqntpnfj5impg0nuiy7.png)

We can find correct addons on github or offical addons of web page  and than download it .

the file zip and we can load without extract the zip file 

![11.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511901322/v8cgnox6hsmuxzzpdjmk.png)

we open the program and you can see right place extantions tab menu and click it 

![12.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511901329/gegdh6myh086zgnzxwao.png)

we can find the download file and drop it directly install screec button you can see below 
![13.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511901341/ehojhe7h6yv0i2wxfolm.png)

**drop . zip to Install button is active now**
![14.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511901348/iehipr9qhppeu6todsw0.png)

and  Installation Complated without any problem . than close it ready to use 


Let's make a Sample 

Open new file  and select `Php` mode  and  start to coding  

you can see if i want to write `echo` press e... and program suggest me " echo" words 

this is very useful features based Bracket directlty on simple code hints installed now our programs 
![15.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511901353/ddgtasws7x2pand3ndm3.png)

![16.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1511901362/g3dutoj6xl9uwaiartyh.png)

Thanks @moorkedi 

Source Add-ons Github repo : https://github.com/Brackets-PHP/Brackets-PHP-SmartHints

[Pic](https://i.ytimg.com/vi/luZGvIniZW8/maxresdefault.jpg)