Bootstrap Workshop

Instructions Resources Tools Exercises

Exercises to familiarize you with Bootstrap essentials. Happy coding!

 

 

This workshop is intended for developers comfortable with front-end web development.

It presumes that you are comfortable writing/reading HTML, and understand how to add attributes and apply CSS classes to HTML elements. Having nominal JavaScript skills, and some familiarity with jQuery, may be helpful with more advanced exercises, but all 'required' JavaScript is provided to you.

If you are not comfortable doing what is listed above, you may find this workshop difficult and/or frustrating. Or it may be an opportunity for you to learn a lot of new skills!

 

All the files required for this workshop are available on GitHub here: https://github.com/michaelkerry/bootstrap_wksp

Easiest

If you are *not* already comfortable with GitHub, the easiest thing to do is to download the zipped directory of all files here. You can then edit them with your favored IDE/Text Editor.

Moderately challenging

If you *are* already comfortable with GitHub, and have a preferred IDE/Text Editor, please feel free to fork the project and clone it to your local machine, then edit the exercises with your favored IDE/Text Editor.

For the Brave of Heart: Set up new GitHub account and use Aptana 3 Studio

If you would like to try something new, and are confident in your abilities, you may wish to try using Aptana 3 Studio to complete this project. Aptana 3 Studio is an IDE based on Eclipse but oriented towards HTML and Ruby development instead of Java or C development. I used Aptana 3 Studio to develop the materials for this workshop and commit them to the bootstrap_wskp repository on GitHub. The most challenging part of this process may be setting up the SSH keys required to connect your local machine to GitHub. You will want to try to get this set up beforehand, as we won't have time to debug these issues during the workshop.

You will need a GitHub acccount. If you do not already have one, please sign up here: Github Home

Once you have one, please follow the instructions to set up ssh keys on your working machine and share them with GitHub, so that you can fork and clone the project to your working machine.

Download and install Aptana Studio 3, which IMHO has easy-to-use Git integration already built in. You may wish to change the default workspace.

If you are using Aptana 3 studio, you can fork and clone the project from GitHub by clicking on the 'File' menubar, then selecting 'Import', then opening the 'Git' directory, then selecting 'Fork GitHub Repository'. You will then need to enter 'michaelkerry' as the owner, 'bootstrap_wksp' for the repository, and then select a valid file path for the destination (in the current workspace is best). You will then see bootstrap_wksp appear as a project within Aptana 3 Studio, and you can select, open, and begin editing files. Click the Green Arrow button to 'Run' the File, which will open up a web browser to display the rendered page.

 

The basic idea is to work through the exercises in directory order, starting with 01-04 in ascending order, then picking through 05-08 in whatever order appeals to you. If you have time to also work through the more challenging exercises in 09 during the 90 minute workshop, well, then, you work quickly. :)

  • Sections 01-04 are mostly about CSS: http://getbootstrap.com/css/
  • Sections 05-08 refer more to the javascript portion of Bootstrap, although you can accomplish much functionality with CSS and other attributes: http://getbootstrap.com/javascript/
  • Files are in pairs; all '*_DONE.html' files contain one possible solution; there are, of course, many others. The other html files are the starting points. All exercises can be completed with CSS classes alone, but can also instead be completed with bootstrap.js - or some combination of the 2. The solutions provided are almost exclusively CSS solutions.
  • Click the 'start' link for each section below to get oriented (overview, references, links), then use the links to see the starting and end states of the exercises (this will give you a visual reference as you work), then open the first project (e.g., '01_grid_breakpoints/2evenCols.html') in your favorite text editor/IDE.

 

resources