1. Brackets
Working with Brackets

2. Install the Beautify Extension
This will give you a way to ask Brackets to make your code look beautiful automatically
It will drop appropriate pieces to their own lines
It will fix your indentation & make code easy to ead
Install the Beautify Extension

3. From the File Menu..
Click Extension Manager
Only need to do this once (and only if no one else has already done it)

4. Search for “beautify” Search for beautify
If the first result does not say “installed”, click it to install
Search for “beautify”

5. Start a New File File menu… New
(Or you can open an already existing file from there too)
Start a New File

6. Save As to Make File Correct Type
File menu..
Save As..
Navigate to your Documents
Type in name.html to get an html file
Type in name.css to get a CSS file
Save As to Make File Correct Type

7. To Save After the 1st Time
File Menu…
Save
Or Ctrl-S
Will put in same place you specified when Save As
To Save After the 1st Time

8. Brackets Help Brackets automatically provides your closing tag
This is mostly helpful…
..but occasionally annoying…
So just be aware it is happening
Brackets Help

9. Live Preview Brackets will update a live preview
Every time you save, it will automatically update the view in the browser
Only updates if you have no errors
Live Preview

10. Beautify From Edit Menu…Click Beautify Or Press Ctrl-Shift-L Before
After
Beautify