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 […]
Category: CSS
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 […]
Categories
The HSL Color Model
When you think about it, rgb and hexidecimal are not particularly easy to work with. Remembering that this much RED when combined with that much BLUE makes HOW much PURPLE isn’t especially intiuitive. Doing this kind of brainwork in hexidecimal is even more annoying: off the top of your head, see if you can work out […]
First, download the required files. Using Firefox for your browser will allow you to use its Layout tab in its Inspector. If you’re at Langara, use the Firefox Developers Edition. The task: In the files you download is a grid-starter-template.html file. For each layout you are to build, duplicate and rename to reflect the layout […]
This exercise primarily focusses on the use of the FLEXBOX css module for layout. It should also reinforce your understanding of 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 use them at. In a production […]
In this exercise, you will build a mockup of the first page of a magazine-style WordPress theme called Midterm. It will look more or less like this, but consult the screenshots that you will get shortly, because the design has changed a bit. Download the starter files here. The Task Build the layout as close […]
The exercise will focus on the essential points of the FLEXBOX CSS module. It won’t have anything design-related—just pure css layout concepts. To begin, make a folder, set it up as a new Atom project, then make an index.html file with a single unordered list with 15 list items, each holding one single-word link. Now […]
Categories
ATOM Packages
A lot of good text editors, like Sublime Text and Atom, have the ability to easily install packages that will extend their core functionality. Sometimes, people will make packages to replicate functionality found in other editors. For example, I am a longtime Sublime Text user. However, since Atom is free, I’ve started using it so […]
If you want to practice float-based layout techniques, here are a few exercises. There are some very useful techniques contained in these exercises. If we have not yet covered a technique or tag yet in class, google it. Berlin Photo Gallery Go to this page and download the files and follow the setup instructions. This […]
Categories
Using Google Fonts
Using a hosted font service like Google Fonts or Typekit allows us to use a much wider range of fonts and weights than are included in the default range of fonts resident on users’ computers (as itemized at cssfontstack.com). Because the fonts will be downloaded to the user’s computer when the page loads for the […]