Brackets is open source software, so you can download it to your own computer from http://brackets.io. When you first start up Brackets, it will bring up a Getting Started document in HTML format, so you can immediately see some examples of HTML tags. You are looking at the raw HTML source; if you have the Chrome browser installed, you can see a formatted version of the same document by clicking on the lightening bolt icon in the upper-right corner. (This is also called the Preview icon.) To start, you may just want to skim the Getting Started document to get a sense of what topics it is talking about without worrying about any of the specifics, since much of that document is written for experienced web page developers.
You should also download the Beautify extension. To do this, click on the icon below the lightening bolt Preview icon (this one looks like a little Lego block), which will bring up the Brackets Extension Manager. In the Search text box, type Beautify, and then choose to Install it. Once you have installed it, you will have a couple of extra menu options in the Edit menu, plus you will have a new Beautify icon (looks a bit like a magic wand) along the right edge. You will use Beautify to clean up your indentation in the files you create.
Next, download the following three files into the folder you created for your own work in this course. You can download these files by right-clicking or control-clicking on the links below and saving them into the folder you specify.
In Brackets, open the folder you created for this course by choosing file->Open Folder and navigating to the folder you created. You should see the three files you downloaded above in the left panel.
Open the Simple HTML Page by clicking on its name in the left panel. Make
a copy of it by
immediately saving it as a new file in the same folder, using the
File->Save As… option. Since this first file will serve as your
"home" page for this course, name it
TIP: Web Page Filenames
By default, web browsers look for files called
index.html, so that is a good name to use for the "home" page of any project; in this case, the "home" page for your work in this class. If you create other files in this directory (as you probably will), you will want to give them other names, such as
project1.html. It is best to avoid spaces and special characters in your filename (e.g.,
COMP Lab #1is not a good filename for a web page).
At any time, you can preview what the page will look like in a web browser 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. You will find yourself going back and forth between the editor and preview windows frequently as you develop web pages.
Save your file frequently as you work.