For this code challenge, download this zip archive. Open the index page in a browser. It will look like this: Your task: in the scss partial _your_work.scss, edit a single css selector: main make the page look like this, but only above 1000px page width (click image for full size). Limitations: You cannot edit the […]
Category: CSS
Categories
CSS Blend Modes Tester
In the following exercise, you will explore the following areas. css blend modes css variables (also known as custom properties) grid auto-fill and minmax() advanced form styling animation transitions js change event js event targets more visual studio efficiencies In the project, you will make a CSS Blend Modes Tester: a tool that will allow […]
Categories
SASS Mixin Exercise 2023
For this exercise, please watch all the Loom videos at the following locations. Code along with the examples, or you will not remember anything from the videos. There is a lot of content in these videos, so it would be best to watch (and code along with) them over a range of days. You will […]
For this code challenge, please download this image. For the paths to be consistent, put the html file, the image, and the css file in the same folder, and use relative paths ( no starting / ). Put your CSS inside <style> tags in the head of the document. Don’t link to an external stylesheet. […]
First, please download the starter files. There is a folder of screenshots contained within the folder you download, as well as an HTML file and some image files. Exercise Details This document will describe what I’d like you to do in the exercise. This Loom video will also demonstrate. In this exercise, you will make […]
First of all, please download these starter files. Next, download the screenshots. Here is a Loom movie showing how the page needs to behave. If this a test, you may use the Internet or your notes, but you may not communicate with anyone other than me or our Instructional Assistant (if we have one). Details […]
For this exercise, please watch the videos at the URL below. Flexbox “Holy Grail” 2025 Layout The order you should watch them in is indicated by the number at the start of each video’s title. You should end up with a page that looks more or less like this: When done, name your project folder yourname-flex-video-follow-along, […]
First, please download the screenshots and logo file. In this exercise, you will make the front page of a magazine-style site. There will be three main sections to the page: header, main, and footer. All type will be the georgia, times, ‘times new roman’, serif font stack. A short movie describing the task and showing […]
For this exercise, please first download these files. Once you unzip the files, you will see that there is a begin-here.html file, a screenshots folder, and a folder of images. In the begin.html file, there are a number of tables that have been marked up already. Some images are also already in the HTML. You […]
This exercise is for you if you want to review how to use the grid display property, as well as to use the mobile-first authoring method effectively. If you have not used grid before, it would be better for you to do the step-by-step version of this exercise: it will take you through building this […]