Best way to develop a dynamic website

The develop a dynamic website, with all those smooth page transitions similar to gmail. As per design we will use Bootstrap, Bootstrap provides all the css tools you need to setup a quick website.

Frontend skills you will need
- javascript
- html

Frameworks
First of all we will start of with a model view controller + observer design patterns to achieve a maintainable site.
The web frameworks that we will use are
- backbone js , giving a "structure" to the code
- require js , setting up javascript dependencies, works like php include
- mustache , page templates
- jquery , dom manipulations

as font icons we can get them for free at fontello, their package includes font-awesome

Folder Structure

  
        index.html
        css/
        templates/      <=== contains the html templates
        js/views/   <=== responsible for inital html materials and listenes to model changes / actions / events
        js/models/  <=== responsible for data models
        js/controller/  <=== defines the site routes
        blueprints/     <=== contains all the 3rd party library

To setup hashbang (similar to gmail) for page manipulations, there is a backbone module - backbone router. Using backbone router we can set up page to change dynamically depending on the hashbang setup. To let your hash bang searchable / crawable, checkout this post.

You can checkout the Boiler Plate i've setup using this structure for off the shelve deployment.

Further Readings
Backbone Router
- http://backbonetutorials.com/what-is-a-router/

Backbone + MVC
- http://backbonetutorials.com/organizing-backbone-using-modules/
- http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-getting-started/
- http://blog.andyet.com/2010/oct/29/building-a-single-page-app-with-backbonejs-undersc/
- http://backbonetutorials.com/what-is-a-model/