Today’s goals:

• Begin learning how to use Bootstrap, a very popular front end framework
• Review your Bootstrap self-paced tutorial 

 Today’s featured site:

• https://www.smashingmagazine.com/2019/03/desktop-wallpaper-calendars-april-2019/ – New desktop wallpaper for the month of April!

 Bootstrap

Basics

1. Very popular responsive front-end framework created and maintained by Twitter
2. Flexible grid built on flexbox (columns add up to 12)
3. Built-in CSS for grid layout, buttons, menus, lists, etc.
4. CSS classes are applied to HTML elements to make use of Bootstrap’s default styles for layout, visual design, etc.
5. Built-in JavaScript for things like photo slideshows, pop-up windows, etc.
6. Extensive documentation and code samples to help developers get started quickly and easily
7. To use Bootstrap, you can either download all of the files OR link to the supporting CSS and JavaScript files
8. Bootstrap examples: https://getbootstrap.com/docs/4.3/examples/

Examples

• Bootstrap basics #1- page set up, HTML tags, and CSS classes: Let’s try this basic Bootstrap tutorial . Let’s pay attention to what files are need to make Bootstrap work and the HTML tags and CSS classes used.
• Bootstrap basics #2- column classes and their sizes: Bootstrap provides options for page layout on small, medium, and large screens. You can simply choose to have your content stack vertically on small screens or you can preserve your horizontal layout on a small screen by using the xs class like this . Let’s get rid of the xs classes except for the last row and see what happens.
• Let’s look at the page you’re going to create and review the content in each section: https://www.w3schools.com/bootstrap/trybs_theme_band_full.htm 

Basic Bootstrap Demo

1. Open Notepad++ and create a new webpage. Save it as bootstrap_demo.html
2. Create opening and closing html, head, title, and body tags.
3. Let’s add the correct meta tag for viewport scaling (link )
4. Let’s get Bootstrap’s CSS and JavaScript by copying/pasting the links from the Bootstrap website 
5. Let’s create our page container by adding div tags with a class of “container” right below our body tag. Don’t forget the closing div tag before the closing body tag!
6. Let’s add a row by adding opening and closing div tags with the class of “row”
7. Let’s add 3 columns by adding div tags and the col-sm class. Let’s label each column column 1, column 2, and column 3.
8. Let’s add a button inside of each column using the button tag. We can make use of Bootstrap’s CSS by going to their website for the available button styles: https://getbootstrap.com/docs/4.3/components/buttons/ 
9. Let’s make use of Bootstrap’s “jumbotron “
10. The Bootstrap site has a ton of resources and code samples to get you started and to help you become familiar with all of Bootstrap’s features. This cheatsheet is also very handy- let’s check it out: https://hackerthemes.com/bootstrap-cheatsheet/ 

Self-paced Bootstrap Tutorial

• Objective: to become familiar with Bootstap’s features by building an advanced webpage
• Skills:
  Reading framework documentation
  Applying framework code/features
  Troubleshooting
  Reading and following directions
• Tutorial steps