Twitter Bootstrap: A matter of hours

Twitter Bootstrap is the most easy way to add powerful UI interface to your project, which would be in its naked form otherwise. Most of the developers do suck at designing and thus they find a hard time trying to make their hack look good.Spending just a few hours to learn to use bootstrap would really save a lot of time in covering up the underlying functionality with ergonomic interface.

Though I’ve used it a couple of times I actually never knew what most of the stuff were in Twitter Bootstrap. The glistening website always made me consider learning to use it but laziness, a developer’s implicit nature, prevented me from doing it.

Finally I grasped up the opportunity of learning it up by taking it as an academic assignment. So one night after a wasting a lot of hours unproductively, I started searching for ways to learn it and ended up with this.

Watched all the 12 videos. coding alongside, in 3 hours or so(don’t remember exactly). The videos led me through lists, tabs, tables, popovers and luckily even carousels turned out to be very easy. The only thing that didn’t work out for me, and was not there in the videos was Scrollspy. Still trying to make it work.

Then I had to compile all of this together in a single page making use of most of the Javascript features. I browsed through some examples here and here and finally remembered of  Initializr, a ready made HTML5 boilerplate which provided the most basic bootstrap template featured almost everywhere.

I cleaned the code, removed the extra stuff, as I had to make a video of how I prepared the website as part of the assignment.So, the certain parts of the page, like header bar became unresponsive for multiple devices.Not a big concern. Then I added the Javascript features in places to finally come out with(p.s. open it in a new screen to see it in action!):

Website with Bootstrap

In the meantime, I also fixed a perennial problem of jQuery not working offline in web pages. Found the solution here. Although learning Bootstrap was a necessary evil, as I’d need to use it in some upcoming projects(lookout for it), but I was really glad I learnt it in a such a short matter of time.

This is the video tutorial that I made that would explain the construction of the above page.

And here is the link to the source code.

Advertisements

7 Comments on “Twitter Bootstrap: A matter of hours”

  1. Njouba says:

    The link for the source code doesn’t work. Would you provide me the source code? Thanks

  2. Ranadeep says:

    Dead link , for the video .

  3. vijay says:

    where is the source code ?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s