Introduction to Bootstrap 3

This video explains how to install bootstrap quickly. It also shows a quick demo of the grid system as a way to test if the framework is installed successfully.

Updated: Nov 28, 2013: Takes the extra installation process out
This video demonstrates the very basics of the grid system in Bootstrap 3. This is a very short introduction so that you can get a feel of the grid system before getting too deep into the details.

Updated Nov 28, 2013: Takes the extra unnecessary stuff out
This video demonstrates how you can nest grids inside each other.

Updated Nov 28, 2013: Takes the unnecessary stuff out
This video demonstrates how you can use mixins to achieve semantic html markup. This example is about using mixins while working with the grid system.

Update Dec 10, 2013: Adds the project files

In this video I will go over the different bootstrap variables available for writing media queries to target different window sizes for responsive designs. I will go through the three possible options for using the media queries: specific range queries, min-width queries and max-width queries. You can use each of these options separately or combined with each other to make more responsive designs. Below are the list of the sites that were used in the video:

Bootstrap Docs: http://getbootstrap.com/css/#grid

Resizer Bookmarklet http://lab.maltewassermann.com/viewport-resizer/

This video demonstrates how you can use the responsive utilities to hide or show elements for different size screens.

Update Dec 10, 2013: Adds the project files

This video demonstrates how you can convert a wireframe layout to html. In the next videos we will convert this layout to an actual fake company website.

This is a longer video that shows you a practical way of using the Chrome Dev tools to develop. In addition to that, you will learn how to use grids and icons in action. Even though there are no actual psds involved, the process of translating a psd to html/css is similar. The key is translating the layout into grids and knowing the fundamentals of CSS and using Dev Tools. At least that's what I think if you wanna set up something quickly which Bootstrap is made for.

I hope you will find the video helpful. Please leave comments or send me feedback. I do appreciate them and take them into consideration very seriously.

~Amin

Updated Nov.28, 2013. Took out extra duplicated stuff.
This video demonstrates how you can use icons for your components using font / glyph icons.

Update Dec 10, 2013: Adds the project files

This video demonstrates how you can use Bootstrap buttons.

Update Dec 10, 2013: Adds the project files.

In this video we are going to be looking at media objects and media lists and how to use them to float media contents next to other contents.

This video will show you how to compile LESS with the fee gui application called Koala (koala-app.com)

This video will show you how to install Node on Linux.

This video will show you to compile less using the command line less compiler.

This video will show you how to use Grunt to compile LESS as you work on your project.

learn how to use 1pxdeep to create custom color schemes for your Bootstrap 3 components. Using 1pxdeep you can create monochromatic, complimentary color schemes and more

This video demonstrates how you can use Twitter Bootstrap 3 with Rails 4. The video starts with updating Rails 3 to Rails 4 and then download Bootstrap 3 SASS project and then linking Bootstrap to a new Rails 4 project.