Boston PHP's "HTML5 Brunch Season 6"

Greetings! This website is the homepage for my display of work and exercises for the Boston PHP virtual learning group session for HTML5 Brunch, Season 6.

The book that we are using for this session is Sams Teach Yourself Bootstrap in 24 Hours.

There is a Meetup posting about the session as well as a series of discussion threads, starting with the HTML5 Brunch, Season 6 -- Master Discussion List. Weekly progress is tracked by posting to the discussion boards as well as completing any exercises and posting to a publicly accessible site.

Part I: Getting Started with Bootstrap

Chapter work and exercises

Hours 1 & 2 - overview of Bootstrap and web frameworks

Link to download Bootstrap

HTML code to use Bootstrap code from a CDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>


To illustrate use of Bootstrap, which is included on this site, here are a few buttons that are styled with various bootstrap classes. (Note: the buttons do nothing!)


Hour 3: Build Your First Bootstrap Website with the Basic Template

Doing this one backwards - another training course I'm taking had me using Bootstrap, so I'll present a page that I created using Bootstrap, and then the same page without Bootstrap. It is only slightly more than the basic bootstrap template page, but the original is using the Bootstrap grid. Obviously without it, the page looks vastly different!

This is a tribute page for Digital Equipment Corporation founder Kenneth Olsen, using Bootstrap.

The same tribute page, without Bootstrap.css being loaded.


Hour 4 - Understanding Normalize.CSS and the Basics of Bootstrap CSS

Sample web page from Listing 4.1, without custom styles: Sample Web Page

Adding custom styles to the same page: Customized Sample Web Page

Sample webpage using normalize.css as the stylesheet: Sample with normalize.css

Same sample webpage without normalize.css: Sample without normalize.css

Part II: Building and Managing Web Pages with Bootstrap


Hour 5: Grids and How to Use Them

This hour you will learn how grid systems work and why they are useful for design. You will also learn how to use Bootstrap to create your layout grids and how Bootstrap is responsive.

Try it Yourself: Create a Three-Column Layout in Two Ways

Sample three column layouts

Listing 5.5 - HTML for Columns That Don't Float Correctly. This page might display poorly on a small device.
Listing 5.6 - HTML for Columns That Don't Float Correctly. This page has clearfix to resolve small screen display.

Offsetting, Ordering and Nesting Columns

Columns with offsets
Repositioned columns

Responsive Web Layouts in Bootstrap

Adjusting responsiveness for different viewport sizes

Hour 5 Exercises

  1. The clearfix examples are above, Listing 5.5 & Listing 5.6
  2. Test nesting a grid inside another column. Create a simple three-column layout, and then divide the first column into three more columns using a nested row. See example here.
  3. Open your website in your HTML editor, and add a grid layout to the content. If you haven’t already planned your layout, then plan for at least two device sizes—extra small and either small or medium. Then set the columns using the small or medium classes. Don’t forget to offset or move columns that aren’t positioned exactly as you’d like them. See example in my Tribute page project. Notice how there are empty columns when the page is viewed on a wide screen, and as the screen is narrowed, the empty columns are hidden and the text fills the screen width.

Hour 6: Labels, Badges, Panels, Wells, and the Jumbotron

In This Hour:

Hour 6 Chapter examples

Listing 6.1 through 6.4, restyled Bootstrap labels, and Badges

Examples of wells, panels, and jumbotrons

Hour 6 Exercises

  1. Find a portion of your website that could use a label or badge. (Here is one)
  2. Put some content inside a well or panel. This hour's exercise listing is inside a panel.

    How does it look?

  3. Create a Jumbotron layout. I modified the top of this index page to use a jumbotron

Hour 7: Bootstrap Typography

In this hour:

Hour 7 - Code Examples

Headers and headlines examples - Covers all of the book examples of use of header tags and related classes.

Body copy text - the "Try it", and "pull-*" and "center-block"

Hour 7 Exercises

  1. Open your Bootstrap web page and add a list to the content. Try the different list classes to see whether (or not) there are any that work well in your design.
  2. Create a blockquote in your page to highlight a quotation.

Exercises are implemented here.

Hour 8: Styling Tables

In this hour:

Hour 8 - Code Examples

Bootstrap and tables examples - contains the book examples of tables using Bootstrap styling.

the Bootstrap table with .table-responsive

Hour 9: Styling Forms

In this hour:

Hour 9 - Code Examples

Bootstrap and forms examples - contains the book examples of forms using Bootstrap styling.

More Bootstrap and forms examples

Hour 10: Images, Media Objects, and Glyphicons

In this hour:

Hour 11: Styling and Using Buttons and Button Groups

In this hour:

Hour 11 Exercises

I skipped the Hour 11 exercises - there were plenty of examples in the preceding pages.


Hour 12: Creating Navigation Systems with Bootstrap

In this hour:

Hour 12 Exercises

Hour 12 exercises - Mostly everything contained in the example pages..

(End of current material)