In this exercise, which served as the WMDD 4835 Midterm Exam in 2026-01, you will make a website called Bad Habit The instructions file will explain what to do with the starter content. Have fun.
Author: km
1) Responsive Images Without the following code in your CSS, responsive design is pretty much impossible: This code tells the browser to make sure that images are never larger than their container (their parent element, in other words). This means that they will scale as the page size scales. Note: we use max-width for this, […]
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. […]
Categories
HTML Snippets for Visual Studio Code
Go to the Preferences / or Settings area of VSC and choose html.json. Paste each snippet after the previous snippet, but before the file’s closing curly brace. Link to Font Awesome CDN HTML Medium Boilerplate This has a link to the stylesheet, initial cursor location at the title rather than the stupid default position, and […]
Categories
CSS Snippets for Visual Studio Code
Go to the Preferences / or Settings area of VSC and choose css.json. Paste each snippet after the previous snippet, but before the file’s closing curly brace. Responsive Images This code prevents images from being bigger than their parent element.This style should be in every stylesheet you write, because responsive design is pretty much impossible […]
Categories
Emmet CSS Cheatsheet 2026
Note: with most Emmet expressions, the default unit of measure is pixels. However, that can be overruled by specifying a unit. For example m20 will produce a 20 px margin, but m20% or m20p will produce a 20% margin. Likewise, fz3r will produce a font-size of 3rem. Note, also, that some expressions have multiple forms. […]
Being comfortable with all or most of these shortcuts will greatly speed up your generation of HTML and CSS. Example Combinations Combining the emmet commands gives us great power, as the following examples demonstrate. header+main+footer creates a quick structure for typical content header>nav>ul>li*6>a[href=”#”] creates a header with a nested nav containing a list-based menu with […]
NOTE to Kevin: this is a quick copy of the various sections of my ECUAD course for sharing with Binazir. Note: this outline is subject to change, during the running of the course, or before it begins. Course Content This course will introduce students to designing and coding responsive web sites using HTML, CSS, and […]
These are a sampling of demos, exercises, and tests I’ve used in classes at Langara College and Emily Carr University of Art & Design. All (or most) exercises also have an accompanying Loom video solution series. Local Development Server Setup WordPress Basics Intro Gutenberg Blocks / Moving Sites Classic Theme / Plugins Configuration Exercises Site […]
In this exercise, you will investigate the use of Custom Post Types, Custom Fields, and Custom Taxonomies. You will also explore the WordPress Template Hierarchy in greater detail. First, you will need to download the starter content (a Duplicator package) and install it in your development environment. As well, please download the images and data […]