Categories
CSS HTML JavaScript

WMDD 4835 Spring 2026 Class Links for Auditors

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.

We’ve had reports of the Bookings page not working with mylangara email addresses. If that happens to you, please sign up using another email address.

Please do not send email or Slack messages asking for an appointment. It’s much easier to keep track of bookings if we use just one service.

My office location is A240c.

W1: Setup

This week is all about coding quickly and efficiently.

Assignments
There are two assignments for marks this week.

Each of these exercises has readings or videos for you to go through before or while doing the exercises.

The first will give you deep practice with the Emmet HTML/CSS macro utility. A lot of Emmet syntax is based on css selectors, so this exercise will also prepare you for the second assignment of the week.

That Specifically, the second assignment will give you lots of practice with Advanced CSS Selectors. These include the following:

  • descendent selectors
  • attribute selectors
  • adjacent sibling selectors
  • pseudo-class selectors
  • pseudo-element selectors
  • “order” selectors (ie first, last, or intervallic)
  • “has” selectors (aka parent selectors)
  • “not” selectors
  • and more

The concepts and skills reviewed and honed in both assignments will be returned to time and time again over the term.

These assignments will take several hours to complete.

The Advanced Selectors exercise will likely take significantly more time than the Emmet one, so be sure to start it early.

W1 Modules

Snippets, Recommended Plugins, Workflow Defaults

In classes and videos, I will make use of a number of Visual Studio Code Extensions. You will be able to follow along more successfully if you install these ones.

  • Text Pastry
  • Text Power Tools
  • VSCode Random
  • File Utils (for file management)
  • Prettier (for formating and error checking)

I will possibly add more as the course progresses.

Most of what we did in class today is explained in the video series below.

Emmet Essentials

W1 Assignments

Of the two assignments, the Emmet one is shorter. It should take about an hour to complete. The Advanced Selectors exercise is longer: it will probably take an afternoon to complete.

Solution Videos:

W2 Module: Grid Essentials Review

In this week’s class, we will review the basics of css grid, including the alignment, justification and span properties or values. We will also review ultra-efficient ways of creating “auto filling” grids.

We will do the Jim Jarmush Resume exercise in class to accomplish this. There is a full video series.

=========================

Weekly Assignment: JazzIcons

For the JazzIcons exercise, please follow the instructions on this page. 

This page has links to starter files, a video description, and additional instructions.

How to name your project is described at the end of the exercise.

W3 Module: Advanced Grid & Subgrid

This week we will refine our CSS Grid skills, focussing on the following topics:

  • grid’s various alignment & justification properties
  • grid and z-index: positioning without positioning
  • subgrid
  • named grid areas

I hope to go over two layouts in class, but we may not have quite enough time. 

There is, however, a full video series for each.

Class Content

Loom Videos for Subgrid Basics

Weekly Exercise

W4 Module: More Subgrid / Intro to Flexbox

We will finish the faces exercise we did in class last week, adding a neat border effect using subgrid to get perfect positioning.

Class Demo:

Flexbox Photo Blog 2024 (“light”)
Just get the files here. In today’s class, we will skip the advanced color topics.

Flexbox Photo Blog Loom Video Series
This series will explain most of what we do in class today—definitely the essence of using flexbox for layout. Topics include flex-flow, flex-direction, flex-basis, flex-grow, and the align and justify properties.

Flexbox Basics: Loom Video Series
This series explains the align, justify, wrap, direction, flow, grow, and basis properties of flex.

This Week’s Homework: Flexbox Froggy
Many of you have probably done the Flexbox Froggy puzzle before. Neverthessless, it’s still a good idea to do it again—to get practice.

W5 Modules: Flexbox Pt 2

My apologies for putting this content up late!

This week, we continued with more Flexbox by making our PhotoBlog layout more complex via nth-of-type selectors, media queries, and flex-basis.

Assignment Number One: Flexbox Holy Grail Follow Along

For this exercise, please do the following exercise from my teaching site.

https://wrmf.ca/posts/flexbox-holy-grail-layout-2025-video-follow-along-exercise

The exercise provides a link to a video series for you to watch. The order you should watch them in is indicated by the number at the start of each video’s title.

Code along with the videos. Your job is to make sure that the responsive behaviour and overall design of the page is the same as in the videos. 

Instructions on what to hand in are in the exercise description.

Assignment Number Two: Flexbox Hardcore (Döppleganger)

Please download the screenshots and read the instructions for this week’s exercise at my teaching site:

Flexbox Hardcore Exercise 2025 (Doppleganger)

When you are done with the exercise, rename the folder as specified in the instructions, zip it and upload it to the submission folder. 

If you get this layout working perfectly, you will know that you have strong flex skills.

W6 Module: Transitions

This week, there is one class demo and an accompanying video series, and two assignments. Both assignments are due next week.

===============

The first assignment, grid-o-flex is a one-page layout. The exercise is intended to give you practice in the topics we’ve covered in previous weeks, and to help prepare you for the midterm exam.

In different places in grid-o-flex, you will need to decide whether to use grid or flex.

In some cases, either will work, but one method might be easier than the other. In one instance, definitely only one method will work, and choosing the wrong one will lead to deep existential angst.

===============

The class demo will give you an introduction to transitions, transforms, and more.

We will likely finish this week’s class demo in the next class.

There is a full video series covering what we do in the class demo.

===============

There is also another video series that gives an introduction to transforms and transitions. That is included here in case you want to review transforms and transitions more. This will also explain the JS required.

===============

Finally, after going through the class demo video series, please complete the Pretendco Transition exercise. That exercise is for handing in.

W8: Previous Midterms for Practice

Two previous midterms, plus demo and solution videos.

Note: the exam entitled Dogbreath, in the Year of the Plague does not have a link for starter files (you generate the content with Emmet), but the other exam (Set the Controls…) does.

W8: Midterm Exam

  • Bad Habit 2026
    At this link, you’ll find a pdf of instructions, a pdf of screenshots, a starter files zip, and a link to a quick demo movie.

Assignment Solutions