Categories
CSS HTML

I Heart Cities 2019 HTML Mockup Exercise

First please download the starter files and the screenshots. If this is a test, talking to anyone but me will result in a score of “0”. In the download is an HTML file. I have put some of the HTML in. You will need to put in a lot more. Make sure that you read […]

Categories
CSS HTML

World Beat Website Mockup

First please download the starter files and screenshots. In this exercise, you will make the front page of an imaginary worldbeat music magazine. If this is a test, you can use the internet and your notes, speaking to anyone other than me or the Instructional Assistant will result in you receiving a mark of zero. […]

Categories
CSS JavaScript WordPress

Download: SASS WP Gulp Build Process

Basic Gulp-Based SASS Build Process In order to use SASS in your WordPress development environment, download this zip archive. When you unpack the archive, you will have a folder called gulp-dev-for-wp. Inside that folder are two files: package.json and gulpfile.js.   This build process assumes that either: you have installed npm and gulp-cli on your own […]

Categories
CSS JavaScript

Running SASS in a Gulp.js Build Process: Globs and the Watch Task

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 […]

Categories
CSS JavaScript

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
CSS

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
CSS HTML JavaScript Uncategorized WordPress

Basic SASS Setup 2019

Categories
CSS HTML

Flex & Grid: Great Cities of Europe

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, […]

Categories
CSS HTML

Layout Exercise: Metonymy

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 […]

Categories
CSS HTML

Resume Exercise: Jim Jarmusch 2021

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. […]