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: HTML
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 […]
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 […]
In this exercise, you will build a responsive page. You will use grid and flex, transitions, and a small amount of JavaScript. If this is a test, be sure to check what each section is worth. Demo Movie Here is a Loom video describing the layout and page behaviour. Starter Content: Font Awesome Icons First, […]