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 […]
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 […]
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 […]
In this exercise, you will make a photo blog home page. Please download the starter files and the screenshots files. There are three sections to this page: a header, a main area, and a footer. The font used thoughout is the Google font Old Standard TT. If this is a lab exercise and not a test, […]
Photos from this exercise came from Flickr, under Creative Commons licence. Thank you to the following individuals for making such beautiful work available. Jérôme Lemaire Taddie88 Sebastian Krieger Etienne Eric Prunier Guido D´Elia Otero Vlad Fiscutean Thomas Hawk Domi Thomas Hawk txmx 2 Thomas Hawk go elsewhere go elsewhere Thomas Hawk Mr J. Shaft Arq, […]