Slides and materials are hosted at https://girldevelopitcincinnati.github.io/intro-to-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 4’s grid system, component library, and JavaScript plugins. We will apply these practices while building a responsive website from scratch.
This hands-on workshop will cover:
- Setting up a project to work with Bootstrap
- Learning the ins and outs of the grid system
- Implementing commonly used components
- Customizing a component
- Adding an image carousel - with JS-driven slide behaviors
- Using utility classes to adjust look and layout
- Adding custom CSS to your project
For this workshop, you should have:
(a) basic website structuring using HTML elements
(b) knowledge of basic CSS targeting (classes, ids, elements, etc.)
(c) an understanding of HTML and CSS, and how they work together
Bonus:
Though not required for this workshop, knowledge of the following will help you build on the topics learned in this workshop:
(a) Javascript
(b) Flexbox content model
- Your laptop (Mac, PC, or Linux are all okay).
- A modern web browser - either Chrome or Firefox are recommended.
- A text editor. We recommend Sublime Text, Atom, or VS Code - all of these options are free and run on a variety of machines.