Week 11: Responsive Design, Flex Box

In this lesson, you'll learn about responsive design and why it's important, and what modern techniques we use to create responsive web sites. Then you'll learn about one of those techniques: the CSS FlexBox.

Responsive Design

Notes

• Responsive Design
• CSS FlexBox

Resources

• References
• MDN: Responsive Design
• Tools
  • HTML Validator - always validate all of your HTML.
  • CSS Validator - always validate your CSS.
  • CSS Reference Card
• Articles, Tutorials
  • Read over the different sections/guides of MDN's CSS Flexible Box Layout. They have several useful guides, including Basic concepts of flexbox and Aligning Items in a Flex Container.
  • If you need it, here is a bare bones Complete Guide to Flexbox with lots of diagrams and examples.
  • Medium: Responsive Web Design

Homework

Practice/Study Questions

• Complete this week's worksheet. Note that worksheets can be completed during class or after class. They can be completed using your own lecture notes or from the provided materials. Worksheets are not directly graded, but the questions might appear on exams and other evaluations. Ask the professor if you would like feedback on your worksheet (you must make an attempt on the worksheet in order to receive feedback).
• Answer the following questions where you take your class notes (form your answers using YOUR OWN WORDS; you might have to search for answers in the resources above). Feel free to DISCUSS the answers with your classmates.
  1. What does it mean to make a page responsive and why is it important?
  2. What is fixed design, fluid design, adaptive design, and responsive design?
  3. What is the "viewport"? What is the difference between the layout viewport and the visible viewport?
  4. What does the viewport META tag do and why is it important for mobile devices?
  5. What is a flex box? Why might you use a flex box?
  6. How do you create a flex container? What is the flex-flow property? How does it work?
  7. What properties can you use to change the alignment of items in a flex box?
  8. What is the flex-basis property for? How can you make a flex item grow or shrink?
  9. What is the flex shorthand property for and why should you use it?
  10. How do you align/justify individual items inside a flex container?

Practice Exercises

For each exercise, validate the HTML using the HTML Validator. Fix all problems until you get no errors.

1. If you haven't already done so, create a sub-directory in your local workspace and in your server workspace (off /syst10049) called "week11". Feel free to add an extra level for all of your practice exercises (e.g. /exercises).
   • For each practice exercise in each lesson, you'll usually be asked to create an exercise directory for that project, such as "/exercise1".
   • It is assumed that you will create the exercise project directory in both your local workspace and in your server workspace using the appropriate and standard directory structure discussed in class.
2. FlexBox: Edit the codepen below so that the 3 boxes are centered inside the outer DIV, both vertically and horizontally (the screen shot shows you how it SHOULD look)

   

   See the Pen Flex: Exercise 1 by Wendi Jollymore (@ProfWendi) on CodePen.

3. Create a new project directory called "exercise2" and add an index page and an external CSS file in an appropriate directory. Copy the HTML from this CodePen into your index page.

   Add the CSS to your external CSS file to create a flex box layout that places the items such that they appear as the image below:

   

   Other details:
   • The flex box is laid out in wrapping rows.
   • Flex items have a default size of 100px and aren't allowed to grow, but they can shrink if needed.
   • I didn't set any column alignment.
   • Tip: Examine the last row with the 9 and 10 box. They're not individually aligned, they're being pushed to the left and right sides.. by what?
4. Flexbox: Create a new project directory called exercise3 and add an index page and an external CSS file in an appropriate directory. Copy the HTML from this CodePen into your index page, and copy the CSS into your external CSS file.

   Add the necessary declarations to the "main" element rule to create a flexbox that lays out the menu/search banner as shown in the image below

   

5. Nested Flexboxes: Create a new project directory called exercise4 and add an index page and an external CSS file in an appropriate directory. Copy the HTML from this CodePen into your index page and copy the CSS into your external CSS file. Add the necessary declarations and rules to create a nested flexbox that lays out a simple page in the format shown in the image below. Some of the CSS has been written for you.