teaching machines

CS 347: Lab 7 – Flexbox 2

September 16, 2021 by . 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:

The page consists of left panel with emoji icons and right panel containing a photo masonry. Masonry is a mosaic of differently-sized boxes. In general, the boxes in a masonry have different widths and heights. Here the widths of the photos differ, but the heights are all the same. That makes this a special case called horizontal line masonry.

Follow these guidelines in your solution:

The emoji have these HTML entities:


Task 2

A pricing grid is a pattern you regularly on sites that offer different tiers of products or services. Implement your own pricing grid based on this mockup:

Follow these guidelines in your solution:


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

See you next time.