For this exercise, you will make a full-page photo viewer with the following characteristics: on load, the page will present the first image from the vancouver set. the site header will remain visible at the bottom of the page at all times. four buttons in the nav in the header will give the user a choice […]
In this exercise, you will make a user-sortable HTML table. The table’s contents–a list of Shakespeare plays, with titles, genres, and year of composition—-will be loaded dynamically via JS into the table. We will do this without external libraries, just vanilla JavaScript. First please download this file. It contains an array of objects. Each object […]
ES2015+ JavaScript Flexbox Interactive CheatSheet SASS Cheatsheet Bootstrap Cheatsheet Atom Cheetsheet Bash
One source of confusion when installing node.js packages via npm might be that a lot of instructions recommend installing some packages with the -global or -g flag. Simply put, installing globally means that we can access the package from any place in your computer’s file system (as long as the place for our global […]
Imagine that in our header, we have a row of buttons in a DIV, and underneath that we have a NAV with three UL-based submenus, each with a class to identify them: To make a really quick script to hide or reveal a menu on its associated button click, make a new js file and […]
This Loom code-along exercise will involve CSS Blend Modes, CSS Transitions, CSS Animation (just a bit), Advanced Form Styling, and a bunch of JavaScript. The Loom video series can be found here. In this series, we will making a page to demonstrate the effects of CSS Blend Modes. A more complex but similar example is […]
This exercise is meant to get you thinking about transitions, menus, responsive states, layouts, and as always web typography. First, please download the files you will need. In it, you will build a layout that was used to great effect by the Canadian literary magazine The Walrus. I’ve put in some of the HTML, but […]
A lot of good text editors, like Sublime Text and Atom, have the ability to easily install packages that will extend their core functionality. Sometimes, people will make packages to replicate functionality found in other editors. For example, I am a longtime Sublime Text user. However, since Atom is free, I’ve started using it so […]
Since posting the original exercise, I have made a few changes to the look of the page, so if you download the completed version, do not be surprised that some features are different from those described in the exercise. First, download the slim minified version of jQuery and add a link to it just before […]
In order to use the power of Flex for this exercise, it is very important to remember one thing: because Flexbox is all about the relationship between parent and child elements, we need the tbody to be included in this table. The “sort” will involve shuffling the order of the tr elements inside the tbody. […]