First, please download the starter files and the screenshots. Then watch this Loom video to see the layout you need to create. You must use CSS Custom Properties (CSS Variables) in this exercise. The minimum requirement is that all references to fonts and colors must be done with variables. Use a mobile first methodology to […]
Category: CSS
The starter files for this class demonstration include four separate projects. Each has most of the styling done, but none for the layout. The aim, then, is to focus purely on various advanced grid properties: The projects are: The first two projects are also available in a start-from-the-beginning form elsewhere in this site.
Categories
Jazzer.Com Sign Up Form Exercise
In the following exercise, you will make a sign-up form. To begin, please download the files you will require: the background image, and a text file containing all the text used in the page. A couple words in the text file may not match the screenshots on this page: don’t worry about that. Here is […]
Categories
JazzClass.Com Sign Up Form Exercise
In the following exercise, you will make a sign-up form (and possibly a gallery). To begin, please download the files you will require. In the downloaded archive, you will find the following: Change the name of the folder to your-full-name-jazzclass. You can use the Internet, your notes, or previous files. If this is a test, […]
For this exercise, there is nothing to download, except for the screenshots. In the exercise, you will make a single page for an imaginary software company called Photon Software. The page will display details of five apps built by the company. Each app’s details will occupy one panel in the page. Please look at the […]
In this exercise, you’ll make a single page layout. First please download the starter files. Once you unzip the folder, rename it TheSallyRoonies-YourFirstName-YourLastName. Then download the screenshots. Now, make the HTML, CSS, and JS to make the following page with the following details. A Loom Video demonstration of the task. Fonts Use the system ui […]
In the following exercise you will need to analyze the layouts of the various components on the page, and then decide whether grid, flex, or a combination of both will give you the results seen in the screenshots and demonstration movie. Downloads First, please download the resources you’ll need: this is a collection of screenshots, […]
In this exercise, we will investigate the following things: Please download the starter files we will use for the exercise. A video of the project is available here.
Categories
Data for SASS Maps Demo
Font Sizes: Colors Font Awesome Icons
Categories
HTML/CSS/JS Exercise: Photon Software
For this exercise, there is nothing to download, except for the screenshots. In the exercise, you will make a single page for an imaginary software company called Photon Software. The page will display details of five apps built by the company. Each app’s details will occupy one panel in the page. Please look at the […]