You have forty-five minutes for this test. You can use the Internet or your notes if you’re not sure how to do something. You may not talk, text, or email anyone. If you are seen to be looking at your classmates’ work, you will receive a zero for the test. Please download and unpack this zip file. This […]
Category: HTML
This exercise is meant to help you familiarize yourself with the Chrome Developer Tools by examining and modifying the code that makes up any webpage. The Developer Tools allow us to do things like the following: see what html goes into any element in the page examine the nesting of html elements see what css […]
The Preliminary Stuff Please go to the following URL: https://kevinmc.ca/web-production/ and look at the page I’ve put up there. If you’re looking at the page in a lab at Langara or Emily Carr, it probably loaded reasonably quickly. Not So For Everybody, Though Inspect the page in Chrome. At the top of the Inspector, click on Network, […]
Categories
Basic Flexbox Form
For this exercise, you will produce a basic layout and wire up a very basic interactivity. You will code all the HTML & CSS. First of all, download the image you need for the exercise. I am not specifying the font, but you must chose one that looks as close as possible to what’s […]
Finally, let’s figure out what to do with respect to browsers which don’t support Flex—or support it badly. Test In A Range of Browsers First of all, let’s get a screenshot of the likely suspects. Here’s a link to a range of screenshots generated using the crossbrowsertesting.com service. I’m not sure how long these links stay […]
When the user hovers over an icon font, the color of the icon is supposed to change (preferably to a thematically related color, such as the red color we’ve used for the widget titles or the photo accent border). To do this takes only a few lines of CSS: The key here is that we […]
Now we need to hide some stuff. This will largely involve the adding, removing or (better yet) toggling of classes. We’ll use jQuery here. Search for google hosted jquery. For the widest browser support, copy the link to the latest version 1 stream of the jQuery library. Add it as the src attribute to a script […]
The icon fonts component of the exercise stipulated that you had to use icomoon. The reason for this is that you should not just automatically choose font-awesome. There are lots of things you can do with icomoon and similar services—like uploading your own icon files, or generating SVGs, etc—that you cannot do with font-awesome. So go to […]
Import the Fonts The exercise said to use google fonts: Merriweather for serifs, and Lato for sans-serif. While working out a layout, I will often include all the weights of the typeface. That way I can experiment to get the best treatment of type. Always remember, however, to go back into your document and edit […]
Main Document Structure I’ve written five separate articles on the various parts of this exercise that will take you through most of the building of this project. Here’s a link to the original exercise. Here and there, though, I use some code that I don’t cover in the articles: most of it’s for small formatting […]