Today’s Goals:

• Learn about responsive images
• Discuss using responsive web design frameworks (such as Skeleton and Bootstrap)
• Begin learning about Bootstrap, a very popular web development framework

 Today’s featured website:

• https://saijogeorge.com/css-puns/titanic/– CSS puns!

 Responsive Images

• Questions
  1. Why do you have to consider how to make your images responsive?
  2. How did we handle making our background image responsive last week? Why did we take that approach?
• Examples
  1. My example using the max-width property (download code and let’s open in Firefox, responsive design mode)
  2. From W3Schools.com– how to adjust images using CSS and HTML; what to do with background images
• Summary
  • Max-width property (allows for proper scaling)
  • CSS media queries (apply different styles and images for different screen sizes)
  • HTML picture tag (allows you to use multiple images)
  • There is more than one approach to make images responsive and your choices will depend upon the images being used and the particular website project needs

 Using Responsive Web Design Frameworks and Bootstrap

• About frameworks– what they are, what to use & why. Here is another good site to check out.
• Bootstrap is based upon 12 columns, just like Skeleton
• Columns must be inside rows (like Skeleton)
• Font Awesome (remember that?) was originally designed for use with Bootstrap
• Bootstrap was originally created at Twitter in 2010
• Let’s look at some popular sites made with Bootstrap (more than 13 million sites use Bootstrap!)
• To use Bootstrap, you can either download all of the files OR link to the supporting CSS and JavaScript files (like we did with Skeleton; there is a CDN for using Bootstrap)

 Getting started with Bootstrap

• Let’s watch this helpful video (see more of Quentin Watt’s Bootstrap tutorials here). Let’s look at his tutorials list to get a basic overview of what Bootstrap includes to create a responsive webpage.
• Let’s explore the Bootstrap webpage. You will find answers to the following questions.
1. Does the site have code examples? Where can you find details about the code?
2. Does this site have themes? If so, what is different about the themes than what you might find somewhere else online?
3. What steps do you have to take to get started with Bootstrap?
4. Does Bootstrap use normalize.css? (Hint- look at CSS page). What is that again?
5. Can you make your images responsive when using Bootstrap? How? (Hint- look at CSS page).
6. What are Bootstrap’s grid classes called? For example, Skeleton used row and column. What does Bootstrap use? (Hint- see here).
7. Bootstrap comes with some JavaScript functionality. What are some examples of the built-in JavaScript features? (Hint- look here).
8. As a group- let’s check out the Components page.
• 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 (like we saw with Skeleton) 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 see more about Bootstrap’s grid here.