Day 3

Concepts

  • Bootstrap (continued)
  • Display & Position
  • Media Queries/Media View Port
  • Bootstrap Components (in-depth)
  • Practice
  • Take Home

Bootstrap

  • Push/Pull to Change Column Order

Display (behavior)

  • Block
  • Inline
  • Inline-Block
  • None
  • More...
  • Display vs Visibility

Position (location)

  • Static
  • Relative
  • Fixed
  • Absolute
  • More...

Media View Port and Media Queries

Practice

  • Using the same practice repository from last class:
  • Make sure your pull requests are resolved, then pull changes to master branch
  • Create a new branch
  • In your new branch, add media queries so the blocks change colors at min 768px and again at min 875px
  • Create a pull request
  • Slack me the link to your pull request
  • When you get the thumbs up, merge and delete your branch

Bootstrap Components

  • Nav
  • Jumbotron
  • Carousel
  • Buttons
  • Wells
  • Templates

Practice

  • Create a new Github repository
  • Clone to your local machine
  • Set up your project on master branch and push once (this is IMPORTANT)
  • Create a new branch
  • On your new branch, create a test site with:
    • Nav
    • Jumbotron
    • Button(s)
    • Well(s) with some content
    • Basic custom styling
  • Create pull request
  • Slack me the link to your pull request
  • When I give the ok, merge, pull, and delete your branch (both local and github.com)

Take Home

  • Using the same repo from today's practice:
  • On master, 'git pull' your changes from last pull request
  • Go to your repository in the browser.
  • Go to repository settings.
  • Scroll to the "Github Pages" section.
  • Select source: Master Branch and save.
  • Go to your url [username].github.io/[repo-name]
  • Send me your url on Slack

Quote of the Day

  • “Computers are good at following instructions, but not at reading your mind.”
  • -Donald Knuth