1. CSS: responsiveness »
  2. CSS2: Attendance and activity

CSS2: Attendance and activity

During this session, students shows the sample solution of the exercise and the instructor checks the attendance. The instructor also gives feedback on the exercise. Teams are going through the following questions:

Flexbox SWOT

  1. What is CSS flexbox?

  2. How do you turn a html element into a flex container?

  3. How do you wrap flex items into multiple lines in flexbox?

  4. How do you define the direction in which the elements are positioned?

  5. How do you set the initial main size of a flex-item?

Flexbox Froggy

The students complete a few of the levels as a group, then should explain to their classmates which CSS properties and values were used, how they solved the level, and what they learned from the experience. Dont take the “easiest” levels- be brave and challenge yourself! Also be prepared to answer any questions their classmates may have about the level. Here are some questions to help you prepare:

  1. What is the main purpose of using CSS Flexbox layout?

  2. Which Flexbox property is used to align items vertically to the opposite end in a Flexbox container?

  3. How does Flexbox differ from CSS Grid layout?

  4. Can Flexbox be used to create responsive layouts? If so, how?

Flexbox Holy Grail

  1. What is a flex item and what is its job?

  2. What is flex-grow and what is its job?

  3. What is flex-shrink and what is its job?

  4. What is flex-basis and what is its job?

  5. What is the shorthand for setting flex-grow, flex-shrink and flex-basis? Why is it often better than using flex-grow, flex-shrink and flex-basis separately?

GRID Garden

The students complete a few of the levels as a group, then should explain to their classmates which CSS properties and values were used, how they solved the level, and what they learned from the experience. Dont take the “easiest” levels- be brave and challenge yourself! Also be prepared to answer any questions their classmates may have about the level. Here are some questions to help you prepare:

  1. What is the main purpose of using CSS Grid layout?

  2. How does Grid differ from Flexbox layout?

  3. How do you specify the number of rows and columns in a CSS Grid layout?

  4. What is the difference between grid-template-areas and grid-template-columns in CSS Grid?

CSS GRID

  1. What is the grid-template-columns css property used for?

  2. How do you create an empty area in the grid-template-areas

  3. What does the shorthand grid-row do?

  4. What does the shorthand grid-column do?

  5. How do you create gaps between grid items in CSS Grid?

A+ presents the exercise submission form here.