Where We Ended Up Our gulpfile.js file looked like this at the end of the previous exercise: It’s working, but it’s looking for only a single scss file. In this part of the exercise, we’ll get gulp to look at any number of files. Add Some More SASS Files First, create the following additional folders […]
Category: JavaScript
Categories
Running SASS in a Gulp.js Build Process
The instructions for the installation below are Macintosh-specific. PC instructions will be roughly similar, but there will be significant differences that will require some googling. If you are on your own computer, install node.js and the gulp command line-utility. Each of the command line steps can be copied and pasted into the Terminal window and […]
Categories
Basic SASS Setup 2019
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 […]
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 […]