Unit 8: Flexbox
Calling all students!
@flyingCouch @greekmyth @merinnie @Theora @ValKayRee @panaceia @JJJ000YYY @Nablai @W.L.Ink
I’ve noticed that some students have been growing increasingly absent – not submitting any assignments – without telling me they’re not able to stay in the course. I will be looking through recent activity to determine who should be removed. I may remove those who missed 3 in a row. If you feel as if this applies to you, please reach out to me as soon as possible and we can work something out.
Now that that’s out of the way, let’s start talking about flexbox. Flexbox, also known as the flexible box layout, allows the coder to create a design that can adapt to the size of the screen it’s being displayed in. Consider this as your first dip in the deep, deep waters that is known as mobile responsiveness.
This is a bit of an aside but I think it’s worth mentioning for two reasons: one) it will show you that unexpected resources can be useful and that two) it’s never too late to learn a new thing. Anywho, I learned coding initially in early 2018 and was so fascinated by it that I kept tinkering with it on the forums since it worked there. At some point in my journey, I found CSS3 Generator. Initially, I didn’t understand it but as I played around with it more, I realized how valuable it was. This is how I first learned about Flexbox. Feel free to mess around with the options. Let your mind wander a bit.
Now, back to the code. I initially wanted to cover this topic last week but then I realized that if I started talking about parent and children spans, you all would be lost. We all know that span works like containers and that you can modify those containers but with proper nesting, you can create a hierarchy where specifications in the parent span can affect the child(ren) span but not vice versa. Furthermore, by setting a few parameters in the parent span, it can change how the children are lined up (either vertically or horizontally), the spacing between each one, and much, much more.
If you’re feeling lost at this point, that’s okay. Hopefully, I can clear it up with this very simple example:
<span style="font-size:; display: flex; justify-content: space-around;"><span style="font-size:; display: block; width: 100px; height: 100px; background-color: red;"> </span><span style="font-size:; display: block; width: 100px; height: 100px; background-color: blue;"> </span></span>
First, notice how there is one parent span and two children span. Second, notice how the parent specified how the content should be spaced out and the children followed. Third, notice how the parent has display: flex; instead of display: block; in its CSS. As a spoiler, when you code with multiple spans, if you leave the width undefined in the outermost span, the design is typically mobile responsive. More details than you could ever want on mobile responsiveness coming next week!
That’s basically all there is to it. For further reading, I recommend clicking here and here. Don’t forget about the handy CSS3 Generator to better visualize what each property does and what changing the value would do to it. I find that the best way to learn is by doing, so experiment away with your code!
Once you feel ready, submit something to me that incorporates the following:
● a minimum two spans with display: flex; and four child spans
● your choice between two different fonts or two different background-images
● at least 4 different colors (color palettes can be found here and here)
Direct reply to this message with your submission by October 12th 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!