Brackets to darmowy, niezwykle wygodny, nowoczesny, łatwy w obsłudze edytor tekstowy dla twórców stron internetowych, wspierający m.in. technologie HTML, CSS i Java Script. Dla mnie jego wspaniałą cechą jest to, że pozwala wprowadzać zmiany w kodzie i tworzyć dokument jednocześnie obserwując efekt na żywo w przeglądarce. Taka funkcja pomaga nie tylko początkującym w poznawaniu technologii, ale także profesjonalistom, którzy mogą na bieżąco śledzić efekty swojej pracy.

Proces instalacji pod Windows jest niezwykle prosty. Wystarczy na stronie brackets.io kliknąć na przycisk Download Brackets i ściągnąć plik instalacyjny.

Pojawi się okno z podanym miejscem instalacji programu. Możemy je zmienić
za pomocą przycisku Change , wskazując nowy folder .

Zmiany zatwierdzamy przyciskiem Next .

W kolejnym kroku otrzymamy informację o możliwości rozpoczęcia procesu instalacji poprzez kliknięcie przycisku Install .

Po kliknięciu przycisku Install rozpocznie się proces instalacyjny.

Po zakończeniu instalacji klikamy na przycisk Finish .

Spowoduje to zamknięcie instalatora i uruchomienie edytora Brackets .

Po otworzeniu edytora zostanie uruchomiony domyślny plik index.html z zainstalowanej wraz z edytorem przykładowej strony internetowej. Możemy podejrzeć także plik CSS( main.css ) tej przykładowej strony webowej.

Wprowadzanie zmian w którymkolwiek pliku możemy obserwować na żywo w przeglądarce. Kliknij na ikonkę usytuowaną na górze po prawej stronie:

Otworzy się okno przeglądarki z widokiem strony, którą edytujemy:

Od tego momentu każda zmiana wprowadzona w edytorze w dowolnym pliku tej strony, spowoduje natychmiastowe odświeżenie strony w przeglądarce. Dzięki temu na efekt wprowadzonej przed chwilą zmiany nie musimy czekać, od razu obserwujemy, jak wpływa ona na naszą stronę.

Inną ciekawą cechą edytora jest podświetlanie wybranego elementu strony. Kliknięcie w miejsce dowolnego elementu HTML powoduje jego podświetlenie na stronie wyświetlanej przez przeglądarkę. Dzięki temu natychmiast jesteśmy informowani, jaki element będziemy edytować. Poniższy zrzut ekranu pokazuje nam ustawienie kursora w elemencie H1 i podświetlenie tego elementu w przeglądarce:

Podobnie edytor zachowuje się w przypadku innych plików np. CSS. Kliknięcie na selektor powoduje podświetlenie edytowanego elementu na wyświetlanej stronie w przeglądarce.

Jeśli zastanawiasz się, gdzie na Twoim komputerze znajduje się ten przykładowy projekt, zajrzyj do folderu samples . U mnie jest to folder:

C:\Program Files (x86)\Brackets\samples\pl\Szybki Start