Setting up your Website Workflow

Our goal is to have your webpage files up in two places simultaneously: your text editor, and your web browser.

We recommend using Brackets as a web browser and Firefox as your web browser.

Create your webpage folder in brackets

When you first open brackets there's a lot of stuff it wants you to read. Read it if it feels good to you, but it really ain't necessary.

What we do wanna do is make a new folder within Brackets so it sees it as a "project".

Click the "Getting Started" button in the sidebar and choose "new folder". In the dialog that opens up, create a new folder called "my-webpage" somewhere easy to find (like the desktop) and open it.

Project created! You should see 'my-webpage' now in this left sidebar instead of "Getting Started".

Make our index.html

The first file we want is called "index.html". By default, a browser will display this page first when visiting a site...so it's good to name our first file this.

To make it, right click on the left sidebar and choose 'new file', and name it index.html.

Then, write something cool in this file and press save, or use keyboard shortcut of ctrl-s (cmd-s on mac).

Opening this up in Firefox

In firefox, instead of navigating to a site I can tell it to open a file. I do this by clicking File->Open or the keyboard shortcut ctrl-o (or cmd-o if on mac).

In the dialog that opens up, go to the desktop->my-webpage->index.html and choose open.

there's the start of your webpage!

CREATE!

After these steps, you're all set up! You can arrange firefox on the right and your editor on the left. Make changes in the file on your editor and press save, then go to firefox and refresh and see that magic happen!

Well done!