About This Course

In this course you will learn how to get up and running with Bootstrap 3 in a matter of minutes and build a responsive layout that looks great on multiple screen sizes and devices. We will focus specifically on grid layout in Bootstrap with an emphasis on prototyping. By the end of the course you will be able to use Bootstrap for virtually any layout you can imagine and have a strategy for moving it quickly into production.

Course Outline

• Chapter 1: Lesson Intro

  In this video, you will learn some of the pros and cons of working with Bootstrap as well as the new features introduced in Boostrap 3-in particular the responsive layout capabilities.

• Chapter 2: Working With Lesson Files In Codepen

  You will recieve a brief introduction to Codepen and walk through the simple steps to begin working with the lesson files used throughout this course.

• Chapter 3: Working with Rows and Columns in Bootstrap

  Learn the basics of Bootstrap's 12 grid system and how to create rows and columns in particular.

• Chapter 4: Using All Four Breakpoints for Layout

  You will begin to experiment and understand the 4 primary breakpoints that are part of Bootstrap 3's responsive layout system.

• Chapter 5: Starting Your Mobile Layout

  You will begin adding content and working within Bootstrap's "mobile-first" single-column grid layout.

• Chapter 6: A Two-Column Mobile Layout

  Just because a layout is "mobile" doesn't mean everything has to be a single column. Learn how to divide the mobile layout you created in the previous chapter into two columns.

• Chapter 7: Using Offsets In A Desktop Layout

  In this chapter you'll begin to address how to adapt your layout for wider screens; in particular, you will focus on layout for "desktop" screens. In order to accomplish this, you will look at the powerful "offset" styles in Bootstrap.

• Chapter 8: Creating Advanced Layouts with Nested Rows

  Typically, the more room you have to work with on a screen, the more complex your layout can be. In order to achieve advanced layouts with multiple columns you'll need to learn how to use Bootstrap's nesting capabilities.

• Chapter 8: Icing On The Cake

  This lesson focuses on the grid layout features in Bootstrap, but there are a number of other convincing reasons to use Bootstrap for quick and easy layout design. In this chapter, you'll take a look at some of those reasons, including the ability to add your custom CSS and button styling, as well as an introduction to Helper Classes and Responsive Utilities.

Prerequisites

• A basic knowledge of HTML and CSS is recommended
• Familiarity with responsive design principles, specifically the use of CSS media queries is recommended

Software Requirements

• Mac or Windows desktop or laptop
• Google Chrome web browser recommended