This page will explain how to produce the layout from the “Light” Photo Blog Flexbox exercise. In a few small places, it will modify the design in small ways, in order to improve it. Emmet Setup Even though there was an index file provided with the download, let’s practice our Emmet skills in a new […]
Category: CSS
Categories
JavaScript Exercise: Photo Viewer
For this exercise, you will make a full-page photo viewer with the following characteristics: on load, the page will present the first image from the vancouver set. the site header will remain visible at the bottom of the page at all times. four buttons in the nav in the header will give the user a choice […]
For this exercise, please do the following: Read this page about the HSL color model. If you want, keep it open for reference while doing the exercise. Download these files and make a new Atom project (or a project with whatever editor you’re using). Add a stylesheet and put a link to it in the […]
First please download the starter files. The difference between the two is that the first has the javascript written for you, but the second asks you to write the javascript. If you are a Langara Publishing or Emily Carr Intro to Web Design student, please download this one. If you are a Langara WMDD student, […]
ES2015+ JavaScript Flexbox Interactive CheatSheet SASS Cheatsheet Bootstrap Cheatsheet Atom Cheetsheet Bash
Categories
Accessibility: Color Contrast
One of the easiest things you can do to ensure that you pages do not present accessibility barriers is to make sure that your text and interface elements have high contrast. The Web Content Accessibility Guidelines (WCAG) give recommendations on ratios representing contrast between light and dark. The ratios are always given as X:1, where […]
Categories
Build Tools: npm Local vs Global
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 […]