Building With Bootstrap

Bootstrap, an open-source front-end framework, is one of most popular of its kind for building responsive, mobile-friendly projects on the web. Composed of flexible HTML, CSS, and JavaScript components, it allows designers and developers of all skill levels to launch beautiful, fully-functional websites quickly. The best part: it’s completely free to download and use!

In this workshop, we will guide you through some best practices when using Bootstrap’s grid system, component library, and JavaScript plugins. We will apply these practices while building a responsive resume site from scratch.

This hands-on workshop will cover:

• Downloading Bootstrap and adding it to an HTML document
• Working with Bootstrap’s responsive grid system
• Styling images and buttons with Bootstrap classes
• Working with Bootstrap’s reusable user interface components
• If we have time: incorporating Bootstrap’s “Scrollspy” Javascript plugin on your resume site

Prerequisite knowledge

• Good working knowledge of HTML & CSS, and how they work together
• Knowledge of basic CSS targeting (classes, IDs, elements, etc.)
• Basic website HTML structuring using divs, and how to apply classes to HTML elements
• Bonus: how to add jQuery to a web project (we will not be writing Javascript in this class, but it will make covering Bootstrap’s JavaScript plugins go a little faster)

What to complete before class

• Download Sublime Text 2 or 3 (http://www.sublimetext.com/)
• Have a modern browser installed on your laptop (Chrome or Firefox)
• Download the workshop files (https://github.com/gdiminneapolis/building-with-bootstrap-project-files/archive/master.zip)

To edit the presentation files

Install the node modules: npm install

Clone the Reveal.js submodule:

1. cd reveal.js
2. git submodule init
3. git submodule update

Start the server: gulp serve

Run the build: gulp watch