diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 155 |
1 files changed, 95 insertions, 60 deletions
@@ -3,35 +3,109 @@ layout: default title: --- +<div class="row"> + <div class="col-lg-4"> +<div class="panel panel-primary"> + <div class="panel-heading"> + <h3 class="panel-title">About</h3> + </div> + + <p>Backbone Tutorials is a collection of tutorials written by <a href="http://thomasdav.is">Thomas Davis</a>. Everything is open source and I try my best to keep the tutorials updated. Though I am busy and only work on this is my spare time so many <a href="https://github.com/thomasdavis/backbonetutorials/graphs/contributors">contributors</a> have also help me put this resource together.</p> + </div> + </div> + <div class="col-lg-8"> + <div class="panel "> + <div class="panel-heading"> + <h3 class="panel-title">Backbone.js Beginner Video Tutorial</h3> + </div> + <img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> + <a href="http://gum.co/backbone-beginner-screencast" class="btn btn-primary">Watch Video</a> + </div> + </div> +</div> -<h2>Beginner</h2> -<ul class="tutorials"> - {% for post in site.posts %} - {% if post.type == "beginner" %} - <li><a href="{{ post.url }}">{{ post.title }}</a></li> - {% endif %} - {% endfor %} -</ul> +<div class="row" > + <div class="col-lg-4"> + <div class="panel panel-success"> + <div class="panel-heading"> + <h3 class="panel-title">Beginners</h3> + </div> + <div class="list-group"> + {% for post in site.posts %} + {% if post.type == "beginner" %} + <a href="{{ post.url }}" class="list-group-item ">{{ post.title }}</a> + {% endif %} + {% endfor %} + </div> + </div> + </div> + <div class="col-lg-4"> + <div class="panel panel-warning"> + <div class="panel-heading"> + <h3 class="panel-title">Intermediate</h3> + </div> + <div class="list-group"> + {% for post in site.posts %} + {% if post.type == "intermediate" %} + <a href="{{ post.url }}" class="list-group-item ">{{ post.title }}</a> + {% endif %} + {% endfor %} + </div> + </div> + </div> + <div class="col-lg-4"> + <div class="panel panel-danger"> + <div class="panel-heading"> + <h3 class="panel-title">Advanced</h3> + </div> + <p>Coming soon...</p> + </div> + </div> + +</div> -<h2>Intermediate</h2> -<ul class="tutorials"> - {% for post in site.posts %} - {% if post.type == "intermediate" %} - <li><a href="{{ post.url }}">{{ post.title }}</a></li> - {% endif %} - {% endfor %} -</ul> +<div class="row" > + <div class="col-lg-12"> + + </div> -<div style="border: 1px solid #ccc; box-shadow: 0 0 10px #ccc; margin-top: 15px; margin-bottom: 20px;padding: 15px;"> -<h3 style="margin-bottom:15 px;">Backbone.js Beginner Video Tutorial</h3><img src="/backbone.png" style="float: left;" /><p>I have put extra effort into making a very easy to understand Backbone.js video which is also free. It is 70mins long and covers everything you need to know when getting started.</p> -<a href="http://gum.co/backbone-beginner-screencast" class="btn btn-primary">Watch Video</a> -<div style="clear: both;"></div> </div> +<div class="row" > + <div class="col-lg-6"> + <div class="panel"> + <div class="panel-heading"> + <h3 class="panel-title">External Tutorials</h3> + </div> + <div class="list-group"> + + <a class="list-group-item" href="http://backboneboilerplate.com">Backbone Boilerplate - Using require.js with build system</a> + <a class="list-group-item" target="_blank" href="http://thomasdavis.github.com/2011/02/01/backbone-introduction.html">Backbone.js Tutorial – by noob for noobs</a> + </div> + </div> + </div> + <div class="col-lg-6"> + <div class="panel"> + <div class="panel-heading"> + <h3 class="panel-title">Example Apps</h3> + </div> + <div class="list-group"> + <a class="list-group-item" href="http://www.earbits.com">Earbits.com - Music streaming website built with Backbone.js - Great for programmers who listen to music when coding</a> + <a class="list-group-item" href="http://kaleistyleguide.com/">Kalei - A living CSS styleguide - Built with Backbone.js using these principles</a> + <a class="list-group-item" href="http://apiengine.io">ApiEngine.io (Beta) - Collaborativly build RESTful API's with automated testing and client mocking.</a> + <a class="list-group-item" href="https://github.com/alessioalex/ClientManager" alt="Sample application built with Backbone, RequireJS, Twitter Bootstrap on the client and Node.js (Express.js, Mongoose) on the server.">ClientManager - Sample application built with Backbone, RequireJS, Twitter Bootstrap on the client and Node.js (Express.js, Mongoose) on the server.</a> + <a class="list-group-item" href="http://antoviaque.org/docs/tutorials/backbone-relational-tutorial/">Backbone-relational Tutorial - Nested Models With Backbone.js</a> + <a class="list-group-item" href="http://www.clevertim.com">Clevertim CRM - A real life example of implementing a simple CRM with backbone.js (check the Quick Demo)</a> + </div> + </div> + </div> + +</div> +<!-- <h2>Backbone Boilerplate</h2> <ul class="tutorials"> <li><a href="http://backboneboilerplate.com">Backbone Boilerplate - Using require.js with build system</a></li> @@ -47,43 +121,4 @@ title: <li><a href="http://antoviaque.org/docs/tutorials/backbone-relational-tutorial/">Backbone-relational Tutorial</a> - Nested Models With Backbone.js</li> <li><a href="http://www.clevertim.com">Clevertim CRM - A real life example of implementing a simple CRM with backbone.js (check the Quick Demo)</a></li> </ul> - -<h2>Forum</h2> - - - <!-- (2) Placeholder for the forum. The forum will be rendered inside this element --> - <a class="moot" href="http://api.moot.it/backbonetutorials"></a> - - <!-- - (2) Example tag for commenting, put it on a different page - <a class="moot" href="http://api.moot.it/backbonetutorials/blog#my-blog-entry"></a> - - (2) Example tag for threaded commenting - <a class="moot" href="http://api.moot.it/backbonetutorials/blog/my-large-blog-entry"></a> - - Moot paths are awesome: http://moot.it/docs/?backbonetutorials#path - --> - -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br /> -<br />
\ No newline at end of file +-->
\ No newline at end of file |