In the summer semester, we will work with the Film Arts department to create websites for their Unlock The Vault graduating film festival. In the Spring semester, that option is not possible, so this will instead serve as an alternative. The main learning outcome of this course is that you learn how to use, set […]
Category: HTML
For this exercise, please download the starter files. This will include an html file and a folder of images. And please download the screenshots. Finally, here is a Loom video describing the task. There is already lots of HTML in the page. Feel free to add to, or subtract, from that HTML. Font Awesome is […]
For this exercise, please download the starter files. The starter files include an html file and a folder of images. Here are the screenshots. And here is a Loom video describing the task. There is already lots of HTML in the page. Feel free to add to, or subtract, from that HTML. Font Awesome is […]
Please download the starter files from here. A useful but occasionally confusing css property is object-fit (and its related property object-position. It allows to “crop” images with CSS, which can be very useful in responsive design. I have created a series of Loom videos to explain how to use it. As always, please watch them […]
Categories
Emmet Basics Practice 2021
For each of the following conditions, make an emmet equation to produce the described markup. (If you haven’t done tables yet in class, here’s the basics.) 5. Make a list menu with with 12 links of single-word lorem ipsum, but “prewired” with spans and classes for Font Awesome and with the visually-hidden class. 6. Using instructions […]
I have created a Loom video series about web graphics. To go through the videos and practice the techniques shown in them, please download the starter files. Topics covered include: jpeg file size reducing jpeg file size via dimension & quality batch processing in photoshop, bridge, and xnconvert svg: the web’s vector file format png8, […]
In this exercise, you will learn how to create a sliding-down menu for small screens. In it, you will learn about: First, please download the starter files. Set them up as a new project in your editor (likely Visual Studio Code). Now, please watch this Loom video series. Please start with the video that has […]
Increasing Specificity If… you want to target LIs, but only when they are in NAVs. you want to target LIs but only in NAVs in the HEADER you want to target the last li in the NAV in the HEADER you want to target the third article in the section you want to target all […]
For this assignment, I want you to produce a mockup of an online magazine site. This exercise will have five pages and will be completely responsive, adapting to screen size and device. The magazine focus is up to you. Make it realistic. If you like bicycles, make it a cycling magazine. If you like soccer or food, […]
For this exercise, you will create a one-page layout. Please download the files you will need for the exercise: the screenshots the images The images in the layout in the screenshots will be different than the supplied images. Do not worry about that. There is not a starter HTML or CSS file. Instructions on what […]