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.
If you have not done so already, create a course folder.
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.
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.
File->Save
) in Brackets.
TIP: Previewing Pages
You can preview what a page will look like in a web browser at any time by clicking on the lightening icon at the top right of the editor window. Once the preview window is open, it will automatically update whenever you save your file. Alternatively, you can save the file in Brackets and then go to the web browser and refresh or reload the page. Most browsers have a circled arrow icon to refresh the page. If it doesn't seem to be showing you any recent changes you have made, you can press the shift key while clicking on the refresh icon; this will force it to look for the most recent saved version of the file. You will find yourself going back and forth between the editor and preview windows frequently as you develop web pages.