teaching machines

CS 347: Lab 6 – Flexbox 1

September 13, 2021 by Chris Johnson. Filed under fall-2021, labs, webdev.

Dear students:

Welcome to lab. Now’s your chance to apply the ideas you read about. Find a partner and complete as many of the tasks below as you can. At the end of our time together, paste your HTML files into Crowdsource in order to receive credit.

Task 1

Recreate the following page using an internal stylesheet:

Ensure your solution meets the following requirements:

• Pull the images from Lorem Picsum using URLs of the form https://picsum.photos/WIDTH/HEIGHT?random=NUMBER. Replace NUMBER with numbers in [1, 3] to ensure unique images.
• Center the design in the browser window.
• Use only one flex parent and three flex children.
• Use only Flexbox and box model properties to control the layout.

Task 2

Recreate the following page using an internal stylesheet:

Ensure your solution meets the following requirements:

• Pull the images from Lorem Picsum using URLs of the form https://picsum.photos/WIDTH/HEIGHT?random=NUMBER. Replace NUMBER with numbers in [1, 6] to ensure unique images.
• The images on the left are against the left edge of the viewport. The images on the right are against the right edge of the viewport.
• Use align-self on the flex children to override the align-items property of the flex parent.
• Use only Flexbox properties to control the layout.

Task 3

Recreate the following page using an internal stylesheet:

Ensure your solution meets the following requirements:

• Pull the eight 200×200 images from Lorem Picsum using URLs of the form https://picsum.photos/200/200?random=NUMBER. Replace NUMBER with numbers in [1, 8] to ensure unique images.
• Center the checkerboard in the browser window.
• Use only Flexbox to control the layout.
• When the user hovers over an image, highlight it with a border. You add styles that only appear on a hover using the :hover pseudoselector in your ruleset, like this:

  img:hover {
    /* ... */
  }
  

  Try using the border property first and see the problem that it creates. Investigate outline as an alternative.

TODO

The next step of your learning is to complete the following tasks:

• Play many rounds of Flexercise.
• Re-read the chapter Flexbox in All Over the Web.
• Continue working on the first project: a static website made of HTML and CSS.
• Research some aspect of web development on your own. Find articles and videos beyond what’s assigned. Summarize what you learn in a couple paragraphs of your own words and with a code sample in your next blog entry before Friday morning. Clearly put the date of the blog entry on your index page.

See you next time.

Sincerely,