Getting Started with Brackets

 


Brackets is no longer supported by Adobe, so we recommend using Visual Studio Code if you want to install a software development environment on your own machine. See Get Started with VS Code.

You may still use Brackets on K College public computers, though.


Download Sample Files

If you have not done so already, create a course folder.


Opening (or Creating) a Web Page

In Brackets, open the folder you created for saving web files by choosing File->Open Folder and navigating to the folder you created. You should see the files you downloaded above in the left panel.

Open the Simple HTML Page by clicking on its name in the left panel. You are now looking at the page source for the page, which includes the page content and formatting information, called tags, in angle brackets (e.g., <html>). A web browser takes that source file and formats to make it look nicer. To see what the formatted page would look like, bring up a web browser such as Chrome or Firefox, choose File->Open…, navigate to your class folder, and select the Simple HTML Page document. Alternative, you can just click on the lightening icon in the top right of the editor window, which will open the web page in Chrome.

You could create a new web page by choosing New File in the File menu or selecting an existing file such as the Simple HTML Page and saving it as a new file with a different name. Any web page files you create should end with the .html extension so that Brackets, your web browser, and other applications know how to interpret it.


Making and Viewing Modifications

Next, make a simple modification that will let you experiment with the Beautify feature and see how to view modifications. You can make this modification in your Simple HTML Page or you can make a copy (choose File->Save As…) and modify the copy.