Bootstrap Lesson Plan

Lecture Outline (Instructors)

Mary Ann = Green

Truc = Purple

PART 1: HTML & CSS Review, Frameworks, Layout, Content

• Review of HTML & CSS

• What Frameworks are

  • What Bootstrap Is
  • Why Bootstrap
  • What's Included
    • File structure
    • How to embed in your page
  • When you should write your own custom HTML/CSS
  • Show off our personal Boostrap sites

• Grid System

  Exercise - Grid

  Base exercises, self contained and not related to portfolio

  Fluid grid layout

• Typography

• Images

PART 2: Components

• Nav

  • Full width
  • Fixed to top
  • Fixed to bottom

• Jumbotron

• Carousel

  Exercise - Hero Homepage

  Use Bootstrap nav classes and jumbotron

• Forms

  • Input group
  • Button group

• Modals

• Alerts

• Exercise - Contact Me

  Email form with name, sender email, subject, content using inputs, button

  Form ACTION uses a mailto: URI so no need to have JS or backend

• Cards

  • Card
  • Images
  • Review Grid
  • Popover
• Exercise - Gallery

  3 column grid layout

  Using cards and images

• Outside of Base Bootstrap

  • Plugins
  • Examples out in the wild
  • Web Apps or projects worked on
  • Show datepicker plugin

• Extras & Resources

  • FontAwesome
  • Sass