I like to start with a working HTML mockup of the site - not the whole site, just the important bits and one example of each type of layout. And by working I mean the links go somewhere, (jQuery) JavaScript does what it is meant to and the site is styled correctly.

But for my daughter, I will make an exception ;-)
Below are the 4 static pages of her website

The project structure will look something like this

Now it is time to add the framework to our project. Most frameworks will require the code to be loaded into the webroot, or a mapping to it's directory; FW/1 is no different in this regrad, but what is different is the the framework in one file - yep, just one CFC. As at the time of writting this tutorial, FrameWork One can be download from github.com/seancorfield/fw1/. While the framework is a single CFC, there are two other important files, again nothing any different from other frameworks, or indead CFML applications in general, index.cfm and Application.cfc. Go and take a look at index.cfm, but brace yourself, you will be in for bit of a shock ...

So what do you make of that then?
OK, how does all this work then? Take a look at Application.cfc
The Application component extents the framework component and sets some variables. This tutorial is not going to take an in depth look at what can be defined, that is well documented in the wiki (Configuring FW/1 Applications), as there is enough set up of the box to build our application - with one exception...

In the download, you will also find a lot of very useful example applications. With the framework added to your project, browse to your website now /index.cfm - you will see a list of example applications. You will see some Hello World samples, skinning, sub-applications , ajax and security applications.

All we need in Application.cfc to get us started is:
<cfcomponent extends="org.corfield.framework"><cfscript>
    this.name = 'fw1-my-application-name';
</cfscript></cfcomponent>

For this project, I have kept things simple and put everything into the webroot. The project will now look something like this.

We are now ready for part two, FrameWork One - View