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: CSS
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
SASS Essentials 2018: Functions
SASS Functions are Similar to Mixins. They tend, however, to be used more programmatically, with logic and return values. Here’s an example. This function will make an element’s text color white if the background is dark, and black if the background is white. To see how this works, put this function in a test file […]
Categories
Basic SASS Setup 2019
First, please download the starter files. In the zip archive you downloaded is an index.html file and several folders of images. The images are full resolution. On a live site, we would definitely need to size them down. I have marked up a lot of the HTML file. You will need to add more HTML, […]
Please download the starter files and set them up as a new project in Atom, or any other editor of your choice. Please also download the screenshots package. In this exercise, you will make a single-page responsive design. You can use the Internet or your notes. If this is a test, you may not talk […]
In this exercise, which we will do in class, we are going to make a responsive single-page resume of the brilliant American filmmaker Jim Jarmusch. First please download the (updated) starter files. Inside the ZIP file you download is an index.html file, a folder with two images of Jim Jarmusch, and a folder of screenshots. […]
This page will explain how to produce the layout from the “Light” Photo Blog Flexbox exercise. In a few small places, it will modify the design in small ways, in order to improve it. Emmet Setup Even though there was an index file provided with the download, let’s practice our Emmet skills in a new […]
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 […]
For this exercise, please do the following: Read this page about the HSL color model. If you want, keep it open for reference while doing the exercise. Download these files and make a new Atom project (or a project with whatever editor you’re using). Add a stylesheet and put a link to it in the […]