For this exercise, please download this package of files. This package contains some images, and a folder of screenshots. Depending on when you downloaded it, it will contain one or two HTML files. The screenshots show three responsive states: open them and view them at full size. Please style the page responsive states as closely […]
Category: HTML
For this exercise, please download the starter files and the screenshots collection. These are big files, so the download might be a bit longer than that for most of the files on this site. Inside the starter files archive is a Duplicator package and installer. Install that in a new WordPress database. Then go […]
For this exercise, please first download these files. Once you unzip the files, you will see that there is an index.html file, a folder of images, and a screenshots folder. The index file has most of the content for the page. You will need to add: a stylesheet icon fonts for the top and bottom […]
Categories
Lab Exercise: Form Processor
In this exercise, make an attractive, responsive form with the following qualities it asks the user for their name, as a required element it asks the user for their email, as a required element it asks the user for their phone number, as an optional element it asks the user for their comments, as a required element it asks […]
Categories
CSS Blend Modes Testing App
This Loom code-along exercise will involve CSS Blend Modes, CSS Transitions, CSS Animation (just a bit), Advanced Form Styling, and a bunch of JavaScript. The Loom video series can be found here. In this series, we will making a page to demonstrate the effects of CSS Blend Modes. A more complex but similar example is […]
First of All… Please download the files for the exercise. In the downloaded archive, there is one HTML file, a folder of images, and a folder of screenshots. For this exercise, you are making a front page of a magazine-style site. There are two designs: one for regular marks and one for bonus marks. The […]
This exercise is meant to get you thinking about transitions, menus, responsive states, layouts, and as always web typography. First, please download the files you will need. In it, you will build a layout that was used to great effect by the Canadian literary magazine The Walrus. I’ve put in some of the HTML, but […]
First, download the required files. Using Firefox for your browser will allow you to use its Layout tab in its Inspector. If you’re at Langara, use the Firefox Developers Edition. The task: In the files you download is a grid-starter-template.html file. For each layout you are to build, duplicate and rename to reflect the layout […]
This exercise primarily focusses on the use of the FLEXBOX css module for layout. It should also reinforce your understanding of 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 use them at. In a production […]
In this exercise, you will build a mockup of the first page of a magazine-style WordPress theme called Midterm. It will look more or less like this, but consult the screenshots that you will get shortly, because the design has changed a bit. Download the starter files here. The Task Build the layout as close […]