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 […]
Category: CSS
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 […]
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 […]
Demonstration Videos, or Pages Exercises
Due Date: Friday, August 02, 2024 by Midnight As you presumably know, I had hoped to make the final assignment involve creating a website for the Langara Film Arts program. However, for a number of reasons we have not been able to coordinate this between the departments. For that reason, I have no choice but […]
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 […]
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 […]
Please download the starter files. In this exercise, which we will do in class, we will examine how three kinds of positioning work:
First, please download the starter files and open them as a project in Visual Studio Code. And here is a link to a video demonstrating what we will build. And here is a full video series that goes through everything we will do in class, and probably more. Topics Covered:
In this exercise, which we will typically do in class, we will examine some advanced grid properties, including grid-auto-flow and subgrid. Please download the starter files and open them up in Visual Studio Code (or whatever other code editor you use),. The supplied project files include an html file and a partially-completed stylesheet. In the […]