Unit 7: Span Sandwich
Calling all students!
@flyingCouch @lst-my-shp-sil @greekmyth @merinnie @Theora @deathinreverie @ValKayRee @hazelnuttys @panaceia @JJJ000YYY @Nablai @keen @W.L.Ink
Today’s assignment is a bit more tricky than our past few ones, so be sure to start this as soon as you can. On a somewhat related note, if you find yourself unable to keep up with the assignments, please let me know as soon as possible. There is no shame in dropping from this coding class. It’s not even a real class. It’s just a thread on a writing forum. It won’t hurt your future to drop. Real life comes first.
Up until this point, we’ve been able to do most of our coding with only a few spans. And while, that is okay, coding becomes much more advanced when you begin the art of nesting. Nesting is when you take a span and put it inside of another span. Here is a very basic example of what I mean: <span style="font-size:; display: block; background-color: tomato; height: 100px;"><span style="font-size:; display: block; background-color: mediumseagreen; height: 50px;"> </span>
When posted as code, the above chunk would look like the following:
This is an example of span nesting, or as I lovingly call it, a span sandwich. The span with background-color: tomato; is called the parent while the span with background-color: mediumseagreen; is the child. Any code that you specify in the parent span will also be applied to the child. Example: You specify color: gold; in the parent but not in the child and then you add text to the parent and the child span. Guess what color both of them will be? That’s right. Gold.
Take as much time as you need to play around with this before you submit. Once you feel comfortable, be sure to include all of the following in your design (yes, I will be checking these when I grade):
● a minimum of 4 spans (2 of which must be child spans)
● your choice of background-image or border-image (check unit 4 for a refresher)
● minimum two different fonts used in the design (list of websafe fonts can be found here)
● at least 3 different colors that don’t make me go blind (color palettes can be found here and here)
Direct reply to this message with your submission by October 5th 6pm PDT. Grades will be given shortly. If, at any point during this assignment you wish to ask a question, feel free to tag me and ask!