Using Brackets

Here are a few suggestions to made your coding a little easier! (And don't forget that Ctrl-z will undo your last change.)

Live Preview

Brackets can display changes to your web source document in the Chrome browser as you are typing those changes. For this feature to work properly, you must first open the folder containing the file you are working on. (Probably lab1, or lab2, etc.) Go the File menu, click "Open folder ...", select the appropriate folder and then click "Select Folder".

Then Ctrl-Alt-p will open a new copy of Chrome - displaying the rendered contents of your source document. (Or click the lightning bolt near the top left-hand corner of the brackets window.)

The "Live Preview" feature avoids the tedious edit - save - refresh cycle that you would otherwise have to endure.

Code Formatting

In the bottom right-hand corner of your brackets window, I recomment the setting "Spaces: 4" - so that brackets uses spaces rather than tabs for indentaton, and inserts 4 spaces per level of indentation

You can quickly "tidy-up" your indentation, using Ctrl-] to increase the level of indentation of the current line (or selection of several lines) - and Ctrl-[ to decrease the level of indentation.

You can quickly delete a line using Ctrl-alt-d. Or use Ctrl-d to duplicate a line (or selection of lines)

You can re-order lines by using Ctrl-Shift-↑ and Ctrl-Shift-↓

Viewing Options

Using the View menu you can Highlight Active Line in the Brackets window, or "Live Preview Highlight"

Perhaps less usefully, using the View menu you can also turn off line numbers, or split the sceen, etc.