Categories
CSS HTML JavaScript

Blend Mode Test Exercise 2025

In the following exercise, you will explore the following areas. In the project, you will make a CSS Blend Modes Tester: a tool that will allow you to investigate the visual effects that can be created using CSS Blend Modes, which are very much like the Blend Modes you might know from using Photoshop. The Exercise […]

Categories
CSS HTML

Charles Dickens 2025 Layout Exercise (Copied from PDF)

WMDD 4835-02 MIDTERM (Dickens) Rename the unzipped project folder dickens-yourfirstname-yourlastname. Basic Details of The Page • System UI font stack • Black background, white text, white borders • Accent Color: deeppink • Font Awesome Icons used: book, skull, user-astronaut, twitter, book-open-reader • Header Nav Hover Colors: deeppink, rgb(47, 210, 228), orangered, #ecf807 • Readmore “Line” […]

Categories
CSS HTML

Flexbox Hardcore Workout 2025 (Doppleganger)

Note: exercise revised January 2025. In this exercise, you will make the front page of a magazine-style site. First please download the screenshots. Use them to understand the required responsive states of the layout. There will be three main sections to the page: header, main, and footer. All type will be the georgia, times, ‘times […]

Categories
CSS HTML

Faces Grid and Subgrid Exercise 2025

First, please download the starter files. In this exercise, you will work with grid to produce the following layout: And here is a Loom video describing the layout To make this exercise more interesting, you may not edit the HTML—only the CSS. Note: the HTML is already “wired up” with the Google font Oswald, and […]

Categories
CSS

Advanced Selectors Exercise: Fela Kuti (revised 2025)

In this exercise, you will explore many ways to use advanced CSS selectors. Download Project Files First, please download this zip archive of the files you need for the exercise. Three screenshots are included in the project. When you unzip the archive, please rename the project folder to AdvancedSelectors-YourFirstName-YourLastName About the Exercise You may NOT edit […]

Categories
CSS HTML

Miscellaneous Lecture Topics and Exercises: HTML/CSS

Demonstration Videos, or Pages Exercises

Categories
CSS HTML WordPress

Alternate Combined 4835-4840 Final Assignment

Due Date: Last Day of the Term by Midnight This project will be done in groups of two, and will serve as the final project for both WMDD 4835 and 4840. Team Characteristics You will work in teams for your project. Each team will have one developer and one designer. However, in recognition of the […]

Categories
CSS HTML

Class Exercise: Container Queries, SRCSET, and Sizes (2024)

First, please download the images we’ll need for the exercise. In this class demo, we will explore the use of the SRCSET and SIZES attributes of the IMG tag. These allow us to deliver optimally-sized images for different screen resolutions and pixel densities. We will then move on to an examination of container queries. Think […]

Categories
CSS HTML

Walrus Transitions & Layout 2024 Revision

In this exercise, you will focus on CSS Transform, Transition, and Animation properities. First of all, please download these starter files. Next, download the screenshots. Finally, study this Loom movie on how the page needs to behave. If this a test, you may use the Internet or your notes, but you may not communicate with […]

Categories
CSS HTML

Positioning Demo: 2024

Please download the starter files. In this exercise, which we will do in class, we will examine how three kinds of positioning work: