One source of confusion when installing node.js packages via npm might be that a lot of instructions recommend installing some packages with the -global or -g flag. Simply put, installing globally means that we can access the package from any place in your computer’s file system (as long as the place for our global […]
Hummus Recipe ( HTML semantics ) HTML Paths Exercise ( HTML Paths based on GuitarMania site, also FTP if at Langara ) Fela Kuti Markup & Styling Exercise ( Markup, Images, CSS: b0rders, fonts, gradients, bg-image, text-transform, letter-spacing. Has screenshot. Can be simple or complex. Early in the course, this would take a couple classes. Sublime Formatting […]
First please download these files. In this exercise, which we will likely do over the course of a couple classes, we are going to mark up a text file with a lot of information about the great Nigerian musician Fela Kuti. Our first concern will be marking up the document semantically—making our choices of HTML […]
About The Task For this exercise, please download the starting files and screenshots package. In the exercise, you will make the layout seen in the screenshots. This is another website about two famous American guitar companies: Gibson and Fender. There are three screenshots: Phone Desktop Back To Top Link Hover State The Markup There is […]
For this exercise, you will make a single page layout for a mock magazine website. First, please download the starter files and the screenshots. The HTML I have given you a lot, but not all, of the HTML required. Try to get as close to the screenshot designs as possible. I have given you all […]
NOTE, October 2020: This tool is now incorporated into the regular version of Firefox, so you don’t need to use the Firefox Developer Edition to get the functionality described in the article. The regular version will work the same way. While the Chrome Developer tools will show a Grid outline when you click on an […]
Please download the starter files. In this exercise, you will make a page comparing two American guitar companies: Fender & Gibson. In case you’re wondering why there are no menus: I want the focus here to be on layout and design principles. Inside the downloaded package of files you will find three screenshots showing the […]
This post will take you through the RWD Berlin Number Nine Grid & Flex exercise step by step. Here are the starter files. Please drag the project folder onto the Atom icon in your dock. Make a new index.html file and a new styles.css file. Don’t forget to connect the stylesheet to the index page. […]
In this exercise, you will make a MOBILE-FIRST layout using Grid and Flex. The first step in the mobile-first method is realizing that by default most elements are already mobile friendly (as long as we scale our images). For that reason, we should put any styles that are common to all our responsive states in […]
Our last task is to do a few tweaks to the menu. In an earlier part of this exercise, we set the menu up for the phone view: Let’s modify that just a bit. Our CSS for the links in the menu is the following: Remove the background-color declaration. We were just using it to […]