Learning Web Design

the Awesome Sauce In-Class Exercise

Chapter 18

Announced on Monday 24 March 2025

Due date is Friday 28 March 2025

Home > Chapter Review and Exercises > Chapter 18 - Transitions, Transforms, and Animation > Chapter 18 In-class exercise

NOTE: You will be using the Awesome Sauce In-Class Exercise folder

that's at the very top of your Class folder.

Instructions

For this exercise you will be modifying the following HTML and CSS, saving it to your Class folder as indicated below, and making the requested changes during this class period. This markup originally came from the class text on Page 519:

<style>

.smooth {

display: block;

text-decoration:none;

text-align: center;

padding: 1em 2em;

width: 10em;

border-radius: 1.5em;

color: #fff;

background-color: mediumblue;

transition-property: background-color;

transition-duration: 1.5s;

}

.smooth:hover, .smooth:focus {

background-color: red;

}

</style>

<a href="…" class="smooth">awesomesauce</a>

Step 1

Copy and paste this into your text editor (I recommend Sublime).

Step 2

To save this as an HTML document, go to your Class Folder, then go to the Awesome Sauce In-Class Exercise folder. An HTML document ends with the .HTML or .HTM file extension. And give it a name.

Step 3

You will need to make the following five modifications:

Change the text "awesomesauce" to something else, whatever you desire.
Apply two different transitions to the <a> tag. Some options are background color, width, color, padding, text-align, etc.

(Need help? Go here: CSS Transitions advanced - change width and height)