Hello, all the auditors in this class. Your attendance is much appreciated! Note: Solution Videos for each week’s exercise will appear at the bottom of this page. If I neglect to put any up, please let me know. Announcement 1: Office Hours Office hours are Tuesdays 10:00 to 12:00. Reserve time via my Microsoft Bookings page. […]
Category: JavaScript
Categories
HTML/CSS Layout Exercise (GOAT) 2025
If this is a test, the points are listed. If this is a weekly exercise, it’s out of 1 mark, as usual. Responsive Layout Summary Header (10 Marks) Header Hover Behaviors (10 marks) Main Content Area Generation (20 Marks) Note: the Visual Studio Code Random extension will allow you to generate the random content in […]
Categories
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 […]
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:
To Install Tailwind:Open your project in Visual Studio Code. Go to Terminal > New Terminal Type npm install -D tailwindcss To Initialize your project, type Then create two folders inside your project. Name them build and src In the SRC folder, make a file called input.css In the BUILD folder, make a file called index.html In tailwind.config.js, edit […]
Categories
Intro to Front End Libraries: Bootstrap
Bootstrap is a popular web development library of pre-built HTML, CSS, and JavaScript components. Developed by Twitter, it gained widespread adoption due to its ease of use and ability to create responsive websites. Bootstrap simplifies the web development process by offering a set of ready-to-use mobile-first UI components, such as buttons, navigation bars, forms, grids, […]
[ Text edited summer 2025 ] In the following exercise, you will make a sign-up form and a gallery. You will also need to use container queries and the srcset and sizes attributes. To begin, please download the files you will require. In the downloaded archive, you will find the following: Change the name of […]
Categories
Jazzer.Com Sign Up Form Exercise
In the following exercise, you will make a sign-up form. To begin, please download the files you will require: the background image, and a text file containing all the text used in the page. A couple words in the text file may not match the screenshots on this page: don’t worry about that. Here is […]
Categories
JazzClass.Com Sign Up Form Exercise
In the following exercise, you will make a sign-up form (and possibly a gallery). To begin, please download the files you will require. In the downloaded archive, you will find the following: Change the name of the folder to your-full-name-jazzclass. You can use the Internet, your notes, or previous files. If this is a test, […]
For this exercise, there is nothing to download, except for the screenshots. In the exercise, you will make a single page for an imaginary software company called Photon Software. The page will display details of five apps built by the company. Each app’s details will occupy one panel in the page. Please look at the […]