This exercise primarily focusses on the use of the FLEXBOX css module for layout. It should also reinforce your understanding of css animation or transitions, and 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 […]
Category: HTML
Über-Emmet Time In this exercise, you will use the Emmet package in your favourite text editor. The goal is to produce the HTML for the layout pictured below (click the picture to see a much-expanded view). For images, use the picsum.photos image service. Similarly, use Emmet’s lorem+number functionality to generate all the text. The idea is […]
Categories
Image Sources
Here is a list of potential sources for Creative Commons, Public Domain, etc licenses. Remember to read each site’s (and sometimes each image’s) licensing terms in order to determine whether you are legally allowed to use such images in your work. Don’t get sued. Unsplash: very high quality images. Copyright free: No restrictions on usage. […]
Categories
Sublime Formating Exercise
This exercise is meant for you to examine ways to use Sublime Text, ATOM, or Visual Studio Code as efficiently as possible. Download this file. If the zip archive doesn’t unpack automatically, double click it to get it do so. The result will be a single HTML file. Open that in ATOM or Sublime Text. In […]
Categories
Chrome Developer Tools Exercise
In this exercise, you will learn how to use the Chrome Developer Tools to examine the html & css of a web page. In Chrome, go to https://guardian.co.uk. Control-click (right-click on Windows) on any element in the page to open the Inspector. As of September 20, 2015, there is a message at the top of […]
Categories
Reasons to Improve Your Accessibility
Reasons to Focus on Web Accessibility Your Customers Audience: If more people can access your content or product, more people might buy it. Making your site more accessible to people with disabilities can also help other people: People on Mobile People with Slow Connections Numerous studies have shown that increases in accessibility lead to increases […]
Task 1 Guitarmania RWD Pt 2 When done task 1, show it to me. You can do this task in your original groups. Task 2 Download Gibson vs Fender Exercise 2, consult the screenshots, and build the page. The index page is more or less already marked up for you. Do this task on your […]
Categories
HTML Paths Exercise
If you need a review of how paths work before doing this exercise (or if we haven’t covered them in class yet), you can find one here. To begin, please download the files you will need for this exercise. When the zip file downloads, unpack the archive (double click on Mac, right-click on Windows). This will leave […]
Categories
SFTP & URLs Lab Exercise
SFTP & URLs Review Task No 1: Please make an HTML page with a single picture of something in it. Make sure that your page is accessible at https://mylinux.langara.bc.ca/~YOUR_ID/picture Task No 2: Make another file, with a single sentence in it. Make sure that it is accessible at https://mylinux.langara.bc.ca/~YOUR_ID/frunobulax/sentence.html Task No 3: Download this zip file. Open it […]
Categories
FTP with Filezilla
Preamble Elsewhere on this site, I show you how to use Fetch for FTP. This page will show how to use Filezilla to do the same thing. Unlike Fetch, Filezilla is available on Windows (as well as Mac). It’s also free to download and use. You can get it here. The screenshots below are from […]