Introduction to Bootstrap 3

An introduction to the basic features of Twitter Bootstrap 3 including the grid system, responsive utilities and mixins.
3.7 (77 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
5,794 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 29
  • Length 2.5 hours
  • Skill Level Beginner Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 9/2013 English

Course Description

This course is an introduction to Bootstrap 3 new features and how it is different from the Bootstrap 2. The videos covering components are short and to the topic including examples and sample code. All the sample projects are hosted on github and available to you any time. I hope that you can enjoy the great features that Bootstrap 3 has to offer just like I did when I started working with this amazing framework almost a year ago.

What are the requirements?

  • Basic understanding of css, html and javascript

What am I going to get from this course?

  • Become familiar with the basic features of Bootstrap 3
  • Get to know the different components of version 3
  • Explore some of the differences between V2.x and V3.x
  • Harness the power of Bootstrap using LESS source files
  • See how you can use Bootstrap with Rails 4
  • Learn how to define a simple color scheme using the 1pxdeep tool

What is the target audience?

  • Beginner or Intermediate web developers and web designers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Setting up the tools
01:39

This video introduces the tools that I will be using throughout the course. I am using MAMP for my local server, you can use XAMP if you are windows. I am also using Sublime Text 2 as my text editor, obviously you can use any other editor that you are comfortable with. I have also have Node installed to be able to use some of the nice available utilities for my development workflow like Grunt and Yeoman.

Installing local server: MAC
02:40
Installing local server: Windows
03:36
03:06

This video explains installing the Emmet plugin for writing html/css faster on Sublime Text 2.

04:21

This video shows you how you can combine sublime snippets with emmet to create flexible snippets. At the end of the video we will go though installing the bootstrap 3 snippets.

Section 2: Installing Bootstrap
03:09

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.

The Less Folder
06:37
Section 3: CSS - Responsive Grid
03:18

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.

03:36

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

Reordering Columns in a Grid
09:27
05:30

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

15:54

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/

03:13

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

05:41

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.

29:04

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

Section 4: The Components
05:44

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

05:13

This video demonstrates how you can use Bootstrap buttons.

Update Dec 10, 2013: Adds the project files.

05:36

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.

Section 5: The jQuery Plugins
The Tooltip
07:24
The Dropdown
02:58
Section 6: Compiling LESS
02:39

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

Installing Node
Article
01:27

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

02:12

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

05:18

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

Section 7: Bonus Materials
07:00

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

05:39

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.

Get My 2 Other Courses At A Steep Discount
Article
Section 8: Conclusion
What next...
01:45

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Amin Meyghani, JavaScript Developer

My name is Amin and I currently work as a Senior Front-end Engineer at a software company called Yodle. I have worked on a variety of projects ranging from implementing user interfaces, to making productivity tools for engineers and designers. I am also very passionate about education and enjoy sharing what I learn with the world.

I am also the co-author of the Less Web Development Cookbook published by Packt Publishing. The book is about working with LESS on the client to make apps more maintainable.

I have been a self-taught learner as long as I can remember and I really enjoy sharing my findings and learnings with the world through any medium that I can. If you have any questions regarding any of my courses, you can reach me at amin@meyghani.net

Ready to start learning?
Take This Course