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