Basic Training: Cascade Site Pt. 4

This assignment was all about pull quotes, specifically, about me learning “how to create a fancy Pull Quote in Cascade” (according to the KB). There are many different methods for doing so, though. So I tried various styles and options to learn what the differences are and when one might be used over the others.

 

The KB tutorial was divided into two different steps. So I did the same on my page.

 

Step 1 focused on the HTML aspect. This section was further divided into two different methods. How are these two methods different from one-another? Well, the first one (the <aside> method) pulled the quote apart from the text by using a line to mark the quote section, whist the second one (the <div> method) did not.

 

Step 2, on the other hand, focused on the CSS aspect, and for this section I had two options. The first option was to use pre-defined CSS classes. I tried using two of those: the “right” and the “left” ones.

 

And the second option was to add custom CSS. For that section I added two pull quotes, one in the <aside> method and one on the <div> method. For both of them I customized the background color and changed it from the example’s default orange tone to blue (to match the cool-toned banner).

 

I had a hard time at the beginning because I kept getting an odd looking formatting error. But both by reviewing the work on my own and by asking some of my peer STAs, we figured out what the problem was. Now that everything is fixed, you can find this page of the following link: https://liberalarts.utexas.edu/sta-12/pull-quotes.php

Update

I also learned how to change the background colors for different quotes and how to adjust their width so that it spans across to the same length of the text. These changes are unpublished, but I still learned how to do them in case a client asks for them.