Why Use Icon Fonts? A couple of significant reasons have contributed to the widespread use of icon fonts for interface graphics. First of all, an icon font is a single file—typically very small at that, because designers will make fonts that contain only the needed symbols. These will be stored in utf upper regions (font geek […]
Category: HTML
One billion Internet years ago (2007 or 2008, to be precise), the innovative UK company Clearleft released a usability testing tool for OSX. The website for the product, SilverbackApp.com turned heads everywhere, owing to its then-really-novel use of the parallax animation technique. The effect is still in use on the current version of the site. In this, exercise, […]
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 […]
Ü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 […]