Make a new html file, a new css file, and a new javascript file: index.html, styles.css, myscript.js. In the html file, connect the stylesheet, and connect the javascript file.] Now, inside the document, add the following Emmet equation and then press TAB: This will produce 10 buttons: In your stylesheet, make ten classes, color1 to […]
Category: JavaScript
Categories
JavaScript Exercise: Photo Viewer
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 […]
Categories
JavaScript: Sortable Table
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
Categories
Build Tools: npm Local vs Global
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 […]
Categories
Quick Button Event Handler
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 […]
Categories
CSS Blend Modes Testing App
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 […]
Categories
ATOM Packages
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 […]