Unit 6: Multi Column Threads
Calling all students!
@flyingCouch @lst-my-shp-sil @greekmyth @merinnie @Theora @deathinreverie @Forever_D_A @ValKayRee @dumplingbabe @hazelnuttys @panaceia @JJJ000YYY @Nablai @keen @W.L.Ink
I hope you all enjoyed your week off because it’s time to jump back into the thick of things. Remember how in assignment three, I mentioned that we’d be talking more about the display property from display: block; later in the course? Well, today is the day to delve deeper into this property.
The display property is important as it specifies what you can do with your code. Normally, by default, the span tag has a display value of inline. You may have noticed if you don’t include display: block;, you are unable to change the width or height of your span box. When you include display: block; in your code, you’re telling the span to behave differently.
There are three commonly used values for the display property but for now, we’ll just be focusing on two of them: inline and block for the sake of simplicity. To start with, here’s a visual explanation:
As I said, by default, the span tag uses display: inline;. You might be wondering if there’s a tag that uses display: block; as its default and that would be the div tag. It’s not really relevant for forum coding but if you decide to code elsewhere, you’ll be able to use the div tag in the same ways as the span tag with the display: block; specified in its inline CSS. Forum coding is broken, yes.
Now, let’s dive into the third type that you can use: display: inline-block;. As the name suggests, it combines some of the properties of display: block; and display: inline;. Instead of each span starting on a new line like it does with display: block;, the elements stay side by side when possible. However, unlike with display: inline;, you can give them a specified width and height. In some ways, inline-block; gives you a greater flexibility when coding:
(Recommended further reading: click here)
For this week’s assignment, design something that uses display: inline-block;. It can be as simple as two squares side-by-side that are both different colors or it can be as complex as a thread design. Let your curiosity and your imagination guide you. There is no right or wrong answer.
Direct reply to this message with your submission by September 28th 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!