» CS 347: Lab 5

CS 347: Lab 5 – Flex

September 10, 2020 by Chris Johnson. Filed under fall-2020, labs, webdev.

Welcome to lab. By now you have already watched the lecture videos on your own. Now we will apply the ideas from those videos in a handful of exercises, which you will complete in small groups.

Within your breakout room, designate one of your team to be the screen sharer. Screen sharer, share your screen and claim your group’s task on Crowdsource. Make sure to enter every group member’s JMU eID so that they receive credit. Your group will be assigned a task number.

Team, complete the assigned task below. Screen sharer, be careful not to dominate. All members should contribute ideas.

Task

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 Flexbox properties for all layout.
When the user hovers over an image, highlight it with a border. Try using the border property first and see the problem that it creates. Investigate outline as an alternative.

Screen sharer, when your group is done or when time is up, submit your group’s solution on Crowdsource.

Reference Solutions

…