LAB8 Spring HCI/ISM Courses

DePaul University | College of Computing and Digital Media ©2019 1

The objectives of this lab are to work on pseudo-element and the element skills, while
continuing to exercise flexbox, media query, and pseudo-class skills. The graduate level class will build
a page for the HCI program while the undergraduate course will build a page for the ISM/UXD
program. Examples in this document refer to the HCI instance only.

Your task is to build and publish an HTML5 webpage resembles mockups on the next several pages.

The requirements are

1. Use foreground images using the element (from the collection of images I’ve
assembled) so that you are using a progressively larger native image as your viewport (on a non-
mobile site) gets progressively wider. Select different images for both portrait and landscape
orientation so that you have two orientations times at least two images sizes. Do this with only
the picture element; do not use @media breaks to manipulate your images.

Notice in the screen captures the landscape images spell out Human Computer Interaction, but
the portrait images show “HCI”. That text is part of the image.

2. I’ve updated the image to use and am providing you with four sizes at a 2×1 form factor and four
images at about a 1.22×1 form factor. I am also giving you the original image I cropped from.
The HCI/ISM text and the Depaul Tree are not in these images and should be placed using the
position property. I’ve provided you with the tree logo.

3. Display the list of courses in three, two, or one column based on fit (without wrapping text).
Course titles are in 20px font (measured in ems). You may use column-count or flexbox (your
choice) to manage the columns. [Hint: refer to the Rachel Andrew code if you get stuck on this.]

My code has my Javascript width widget included as I was troubleshooting where to make the
breaks when I captured my screen shots.

4. Use the ::after pseudo-element to place the name of each course to the right of the course

number. The course name can be found in the HTML variable named data-title. Show
course titles as long as they can all fit without wrapping. When too small of a viewport, show
course numbers without titles in two columns. You decide where the media breaks go.

5. Use the ::before pseudo-element to place a check box to the left of only those courses being

offered during Spring Quarter 2020. Best practice to achieve this is by using an attribute

LAB 8 Spring HCI/ISM Courses

DePaul University | College of Computing and Digital Media ©2019 2

selector to select by the yes/no data-winter variable. Use a CSS entity or a graphic file for
your solution. For more on CSS entities, see
https://www.w3schools.com/cssref/css_entities.asp ]1 Notice in my solution the course
numbers are lined up with the presence/absence of a checkmark overhanging to the left. Can
you make that happen?

6. Include the statement at bottom that checked courses are being offered in Spring 2020.

Publish to your Lab 8 folder as index.html, and submit in the Lab 8 submission box. Please list any
outstanding questions you have. Don’t forget to validate early and often.

See screen captures below.

1 The solution with CSS entities is easier than using a graphic file, but it requires you learning a new concept from
scratch.

https://www.w3schools.com/cssref/css_entities.asp

LAB 8 Spring HCI/ISM Courses

DePaul University | College of Computing and Digital Media ©2019 3

February 26, 2020
Objective
Task

1249×624

2498×1249

4996×2498

624×312

4997.3332

1012×833

2024×1666

4049×3332

506×416

4997.3332

<>DePaul CDM Undergraduate ISM and UXD courses

<>Checked courses are offered in Spring 2020