Getting Started with Brackets

 


Install the Files You Need

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.

You will use the first two files repeatedly throughout this course, as starting templates that you can copy and modify. The third file will just sit in your folder, but by being there it will help the files you write meet our class style guidelines.

Creating a Web Page

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 index.html.

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 #1 is 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 Early and Often

Save your file frequently as you work.