One billion Internet years ago (2007 or 2008, to be precise), the innovative UK company Clearleft released a usability testing tool for OSX. The website for the product, SilverbackApp.com turned heads everywhere, owing to its then-really-novel use of the parallax animation technique. The effect is still in use on the current version of the site. In this, exercise, […]
Author: km
This exercise primarily focusses on the use of the FLEXBOX css module for layout. It should also reinforce your understanding of css animation or transitions, and the use of multiple backgrounds. First, download the starter files and screenshots. Since this is an exercise, I have not sized the images down to the final size I would […]
Categories
Hamburger Menu Exercise Solution
I’m going to assume that you probably didn’t have any problems with the layout components of the Hamburger Menu Exercise, so I’m not covering that part of the exercise here. If you did have layout or font icon issues, come see me, and we can go through any areas of difficulty. In other words, this page focusses […]
Categories
Exercise: SVG Data CSS
In this exercise, we will investigate another way of including interface graphics in your site. We are going to generate a number of SVG images and then convert them into css-accessible data. This will allow us to download all our images inline in our stylesheet and include them via the css background-image property. For browsers […]
Categories
Menu Exercise: Hamburger 1
For this exercise, you will build a common design pattern: a top-hidden navigation scheme. You will also work more with icon fonts and @font-face. First of all, please download the files you need for the exercise. Text CleanUp The file you’ve downloaded is for an imaginary politics website. This page is discussing a famous work […]
Categories
Transitions—Advanced Exercise
Download the files you will need for this exercise. Inside the folder you download will be a logo file, an HTML file, and a JavaScript file that you will use to trigger the class change that will make the menu transition occur. HAVE TO AMMEND THE EXAMPLE SO THAT THE MENU IS THERE ABOVE THE […]
Categories
Positioning Exercise
On a new page make a header, 180px high, with the logo you can download here. Then use Emmet to make five DIVs, all with a class of .gallery. Each will also have another class with a number, like .gallery1, gallery2, etc. Inside each DIV will be six FIGURES. A figure is an HTML5 element that we put an […]
Categories
Transitions Exercise
Using font-awesome for icons, make thirteen divs with child elements like in the screenshot below. The first twelve are menus—whose anchor tags contain icons and the associated text. The last element is a simple form. To reinforce your Emmet skills, try making the whole thing with a single emmet equation. The font awesome icons, by the way, are bomb, […]
Über-Emmet Time In this exercise, you will use the Emmet package in your favourite text editor. The goal is to produce the HTML for the layout pictured below (click the picture to see a much-expanded view). For images, use the picsum.photos image service. Similarly, use Emmet’s lorem+number functionality to generate all the text. The idea is […]
Categories
WMADD 4835 Outline
WMADD 4835 HTML / CSS 2 Credits: 3 Rooms: B014 Contact Info: Kevin McMillan Office A247b 604.323.5941 Days & Times: Spring 2017 Mondays, Jan 09 – April 03 1:30-230 (A247 lecture) 2:30–4:30 (A247 lecture) 430-630 (A110 lab) Office hours by appointment SKIP to Class Content This class will cover HTML & CSS design and development, continuing on […]