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: CSS
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 […]
This exercise will demonstrate ways to utilize advanced CSS selectors. Some reasons why learning advanced selectors will benefit you. About the Exercise First, please download this zip archive of the files you need for the exercise. This includes screenshots showing most of what you need to do. The screenshots were taken on a retina Mac, so they’re […]
You can use practically any text editor to build WordPress themes, and you can run SASS directly from the command line, but Integrated Development Environments (IDEs) like Netbeans come with a lot of advanced functionality, such as sophisticated code-hinting, that will quickly become evident as you start to use them. Installing The Software These installation instructions here […]
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 […]