Categories
CSS HTML

Positioning Demo: 2024

Please download the starter files. In this exercise, which we will do in class, we will examine how three kinds of positioning work:

Categories
CSS HTML JavaScript

CSS Transitions, Transforms, Transitions: Class Demo (Whomsoever 2025)

First, please download the starter files and open them as a project in Visual Studio Code. And here is a link to a video demonstrating what we will build. And here is a full video series that goes through everything we will do in class, and probably more. Topics Covered:

Categories
CSS HTML

Advanced Grid Properties Exercise: Density 2025

In this exercise, which we will typically do in class, we will examine some advanced grid properties, including grid-auto-flow and subgrid. Please download the starter files and open them up in Visual Studio Code (or whatever other code editor you use),. The supplied project files include an html file and a partially-completed stylesheet. In the […]

Categories
CSS HTML

Gibson Gallery Website Exercise 2024 Revision

For this exercise, we are going to make a website that looks like this: First, please download the necessary image and text files. Unzip the file and then rename the folder to yourname-gibson-gallery. Inside this folder is an images folder, and a textfiles folder. Inside the text files folder are six text files. Open this folder as a […]

Categories
CSS HTML

GuitarMania 2024 with Color Theming

In this exercise, you will practice your CSS Grid skills, as well as create a harmonious color scheme for your site. First please download the starter files. This will contain the images and the screenshots of the exercise. Once you’re unzipped that package, rename the folder to firstname-lastname-guitarmania2024. And here is a Loom movie describing […]

Categories
CSS HTML JavaScript Tools & Generators

Setting Up A TailwindCSS Project

To Install Tailwind:Open your project in Visual Studio Code. Go to Terminal > New Terminal Type npm install -D tailwindcss To Initialize your project, type Then create two folders inside your project. Name them build and src In the SRC folder, make a file called input.css In the BUILD folder, make a file called index.html In tailwind.config.js, edit […]

Categories
CSS HTML

TailwindCSS Exercise 2024: Transmetropolitan

First please download the starter files. Now please download the screenshots. Finally, here is a Loom video describing what you will produce. Tailwind Videos A short Loom series on using Tailwind. Killer Shortcut If you go to the tailwindcss website, the keyboard shortcut Ctrl-K will allow you to search the documentation very efficiently. Tailwind Setup […]

Categories
CSS HTML

Protected: HTML/CSS Layout Exercise: Set the Controls for the Heart of the Sun

There is no excerpt because this is a protected post.

Categories
CSS HTML

Protected: HTML/CSS Layout Exercise: Dogbreath In the Year of the Plague, 2024

There is no excerpt because this is a protected post.

Categories
CSS

Flex Playground Class Exercise: Light Blog 2024

In this exercise, we are going to explore flexbox and some new ways of working with color in css. First, please download the starter files. Colors to Use Topics We Will Also Explore Resources