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
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
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>