For this exercise, please download this package of files. This package contains some images, and a folder of screenshots. Depending on when you downloaded it, it will contain one or two HTML files. The screenshots show three responsive states: open them and view them at full size. Please style the page responsive states as closely […]
Category: CSS
For this exercise, please download the starter files and the screenshots collection. These are big files, so the download might be a bit longer than that for most of the files on this site. Inside the starter files archive is a Duplicator package and installer. Install that in a new WordPress database. Then go […]
For this exercise, please first download these files. Once you unzip the files, you will see that there is an index.html file, a folder of images, and a screenshots folder. The index file has most of the content for the page. You will need to add: a stylesheet icon fonts for the top and bottom […]
Categories
Sass Essentials 2018: Mixins
[Continued from SASS Essentials: Variables] In the MIXINS folder are two interesting mixin-containing partial files. Mixins work like FUNCTIONS in other languages, allowing us to pass in values, process them in some way, and then return a value for use. Because these are in a partial, however, I still need to import them. Here I […]
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 […]
Categories
SASS Essentials 2018: Variables
Variables [Continued from SASS Essentials: Partials] You will notice the above pattern repeated if you look into the VARIABLES folder. The _variables.scss file imports the following partials: _borders.scss _colors.scss _layout.scss _typography.scss Then, if you look in the main style.scss file, you will see the _variables.scss file being imported next. Variables allow us to store information in […]
Categories
SASS Essentials 2018: Partials
To begin, please download these files and open the whole folder up in Atom or another editor of your choice. The files are a sample SASS-based project. There’s only 1 HTML file, but there are a bunch of SASS files. The aim of this is to demonstrate a few of the most common, useful, and […]
First of All… Please download the files for the exercise. In the downloaded archive, there is one HTML file, a folder of images, and a folder of screenshots. For this exercise, you are making a front page of a magazine-style site. There are two designs: one for regular marks and one for bonus marks. The […]
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
CSS Grid: Windows 8 Desktop Mockup
For this exercise, please download the screenshot. You will need to use the following: CSS Grid(s) to lay out the page and components Typekit.com to serve a font that as closely as possible matches the Segoe Windows system font (which is not available anywhere except in Windows itself). You will need an Adobe membership to […]