When i first got into web development, the one thing that always used to stump me was just how much information was out there in the way of tutorials. There seemed to be an endless choice of places to learn. But with all these options, there was a tradeoff. The paradox of choice. Because i had so many places that i ‘could’ learn, and because my time was limited, i had a lot of trouble deciding where i ‘should’ learn.

This post is the one i wish i had when i first started to learn about the uber useful html/css framework twitter bootstrap. Had i had a list like this, i reckon i could’ve cut down my learning time dramatically and got to where i wanted to go much faster.

So here it is, the 10 most useful Bootstrap Tutorials For Web Designers (2014) – enjoy!

11 Reasons to Use Twitter Bootstrap – SitePoint

Why it’s useful:

Before you really dig in to any new technology, it’s always helpful to gain an insight into WHY you should learn it in the first place and what the possible benefits could be, some that you may not even have realised. This article does a very good job of breaking down the key benefits that bootstrap has to offer. It also taught me a few things that i wasn’t aware of! And i’ve been using Bootstrap for a while now!

Getting started with Bootstrap 3 – Extreme CSS

Why it’s useful:

Once you’ve made the commitment to learning Bootstrap, this tutorial serves as the perfect starting point. I like it personally because it is low on assumption and very beginner friendly. Unlike a lot of programmer oriented tutorials out there, this is great for a ‘not so code savvy web designer’ to get their feet wet with.

Build A Responsive Bootstrap 3 Site (Tutorial Series) – Youtube

Why it’s useful:

I find that the best way to take in new tech, is to read, see it demonstrated and then read again. For me this has been the most effective way to make the new information sink in. Watching a video tutorial really increases the reference points that you have for a topic very quickly, and for that purpose this particular tutorial is the best one i’ve found (for free) online.

Mobile First With Bootstrap 3 – Nettuts

Why it’s useful:

Bootstrap 3, unlike previous versions has embraced a mobile first approach to its functionality – which means that responsiveness is no longer a ‘should’ but a must. This is the perfect tutorial to help you get your head around the responsive, mobile first approach to web design that Bootstrap 3 takes. It is also pretty well written and very easy to follow. Helped me brush on my responsive/mobile first understanding.

A Comprehensive Introduction to LESS – SitePoint

Why it’s useful:

Less extends CSS and adds a lot of programmatic power to it by allowing you to create more modular styles. Using it (once you get a hang of it) can speed up your development workflow quite dramatically in a short period of time. This tut really does what it says on the tin in that regard. It breaks down the key concepts in a simple format, that makes sure you don’t get lost trying to reimagine how css should be written, like i did initially :).

Twitter Bootstrap 3 – JavaScript Components – SitePoint

Why it’s useful:

Twitter Bootstrap is essentially a combination of 3 things – HTML, CSS and JS. What rarely gets talked about in beginner tutorials for bootstrap online is the JS side of the equation. Despite the fact that this is probably the most powerful part of the entire framework! – this tutorial provided by Sitepoint breaks it all down and outlines the key javascript components that are essential to almost any bootstrap project.

Bootstrap 3 Less Workflow Tutorial – Hello Erik

Why it’s useful:

Once you’ve gotten a handle on LESS – as mentioned above, its primary benefit is that it offers a fairly dramatic productivity boost. But before you can really get into that groove, you’ll need to get a hang of a good workflow for it. This tutorial provides that in a very very comprehensive but simple way.

Up and Running with Bootstrap 3 – Lynda

Why it’s useful:

It’s not free, which is why i recommeded it towards the end but this is how i personally first got my feet wet with twitter bootstrap. So had to add it into the mix! It is honestly the best paid or free bootstrap primer/tutorial online, hands down. Very clear, succint and just plain perfect for a noob. Like i was before i watched it.

Bootstrap 3 Grid Introduction – helloerik

Why it’s useful:

As a web designer, you’re probably fairly familiar with the Grid system. What makes Bootstrap as useful as it is is that it has implemented this concept in a programmatic way that almost anyone can understand. It does take a while to learn the syntax but coming from a design background, once you do that, you’ll fall in love with the Bootstrap way of displaying page layout. And this tutorial is the shortest way to get to that level of understanding.

What’s New in Bootstrap 3 – SitePoint

Why it’s useful:

I thought it’d be best to save this one for last. As it only really becomes helpful once you start to really dig in to Bootstrap. Seeing where it’s been and what its doing now will give you a broader view of where it might be going in the future and how and what you should stay on top of, should you want to keep up with it. This article gives a full breakdown of the new features in Bootstrap 3!