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
- 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)
- 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)
Install the node modules: npm install
Clone the Reveal.js submodule:
cd reveal.jsgit submodule initgit submodule update
Start the server: gulp serve
Run the build: gulp watch