twitter facebook linkedin google-plus YouTube amazon

Responsive Design with Bootstrap

Bootstrap. This workshop is available for presentation at conferences or to public or private groups. It's currently available in a 3-hour half-day, 6-hour full-day, or 90 minute format. Contact Jen to schedule this workshop for your group.

About This Workshop

Learn one of the hottest front-end frameworks and incorporate it into your work tomorrow. Follow along and learn how to build a Bootstrap-based website from scratch, incorporating the responsive grid system, see the basic CSS in action, incorporate Javascript-based components, and customize CSS using LESS. Bootstrap, an open source front-end framework, is one of the most popular front-end frameworks for building responsive websites. In this workshop, Jen Kramer will demonstrate how to use Bootstrap as a foundation in your next web design project.

Learning Objectives

  • Downloading Bootstrap and incorporating it into an HTML document
  • Working with the Bootstrap responsive grid system
  • Exploring Bootstrap’s core CSS, overriding this CSS using standard CSS techniques
  • Incorporating Bootstrap’s image formatting elements and icons
  • Creating and styling fully responsive interactive menus with Bootstrap, including dropdown menus
  • Incorporating jQuery plugins with Bootstrap, including thumbnails, modal windows, and tabs
  • Full day workshop: Customizing Bootstrap using LESS

Prerequisites:

Students should have a solid understanding of hand-coded HTML5. Some background in Sass, CSS, and JavaScript/jQuery is nice, but not required.

Workshop Instructions

We will be building a simple 5 page website about fruit. While I'll be showing you some customization options, this site models Bootstrap's behavior and styling right out of the box.

You are welcome to attend the workshop and watch without coding. However, to actively participate in this workshop, you will need:

  1. Laptop/notebook configured with an editor for HTML, CSS, and JavaScript. I will be using SublimeText 2, which can be downloaded for Mac or PC. However, you can use any editor you're comfortable using.
  2. For the full-day workshop, also download Prepros and install this on your computer. This is a LESS/Sass CSS compiler which is compatible with Mac and PC. The free version is all you need for this course.

    For the half-day workshop, we will not have time to compile LESS and modify these files. I will show you the LESS files and how they fit together, though.
  3. Finally, you'll need the correct set of files for the workshop. Please download these and bring them to class:

Download the HALF DAY workshop files

Download the FULL DAY workshop files