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.
Category: CSS
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
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 […]
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 […]
Starter files for formatting practice: use index.html (Note to Kevin: formatting annoyances fixed.)
First, please watch this Loom video description of the task. Next, please download the screenshots. In this exercise, you will create a single page site called cranq. The font throughout is the system-ui stack. Pay attention to font weights. All text content, except a couple phrases, will be created with Emmet’s lorem functionality. Images will come […]