Scott Granneman

panorama-076.jpg

New Project Creator

Install the Extension

Open Brackets.

Open the Extension Manager.

Search for Brackets New Project Creator, by Jeffry Booher.

Once you’ve found it, install it & close the Extension Manager.

Out of the box, the New Project Creator offers an HTML5 template, but I don’t like it. Let’s create our own that’s better.

Find the Templates Folder

Navigate to the location of the templates:

Create a Template

Create a folder directly in your Documents folder that is named BracketsProjectTemplates. It must be named exactly that, & it must be located directly inside Documents!

In the BracketsProjectTemplates folder, create a new folder & title it My HTML5. Instead of My HTML5, you could also call it RSG • HTML5 (use your initials instead of mine!).1

Go inside the My HTML5 folder. Everything else you’re going to do is inside that folder.

Create a file titled index.htm (or .html if that’s what you use). Open that file & paste the following into it:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
  </head>
  <body>



  </body>
</html>

Save the file & close it.

Create the following folders:

In the scripts folder, create an empty file & title it main.js.2

In the styles folder, create an empty file & title it main.css.

Your file structure inside the HTML5 folder should now look like this:

Close the folder & go back to Brackets.

Using Your Template

In Brackets, select File > New Project.

For Name, enter the name of the project in all small letters, like dad or family-history or css-zen-garden.

For Template, select HTML5 (the template we just finished creating).

For Parent Folder, click Change & select the folder into which you want your project folder to reside.

Press OK & your new empty project will load into Brackets, ready for you to start coding!

  1. To make the • on a Mac, press Option+8. ↩

  2. If you use a Mac & want to create an empty text file, I recommend a free, powerful text editor named TextWrangler. If you use Windows, check out the free text editor Notepad++ (not the default, crappy Notepad that comes with Windows!). ↩

WebSanity Top Secret