After I took Codecademy’s “Learn CSS” course, I figured out it packaged together four shorter courses. Some of these short lessons were all material I’ve learned before and are just a review, so I flew through them quickly enough that putting together in a single “Learn CSS” made sense to me. This situation changed dramatically for the next item on the list: “Learn Intermediate CSS” is again a packaging of several shorter courses, except now the material is new to me and started with CSS flexbox. This was a new and challenging concept for me to grasp, so now I’m in favor of going by the shorter courses instead of the (now quite hefty) package.
Learn CSS: Flexbox and Grid covers the first two lessons of Learn Intermediate CSS. As soon as we started with CSS flexbox I could tell it was a powerful tool. However, this particular course fell short of the normal Codecademy standards. For each function of flexbox, we run through simple illustrative examples, which is good. Unfortunately, these small examples were too simplified for me to understand how they would be applied. In other words, we see a lot of small pieces but the course never pulled them together in a bigger picture.
My personally attempt at summarizing flexbox is: a CSS construct that attempts to capture rules for laying out child elements in a way that is flexible to changes in screen size and aspect ratio. Since there’s no way to capture every possible way to lay things out, the subset supported by flexbox thus becomes a de-facto prescription of best-practice layout from the people who designed this CSS feature. Nevertheless, there are more than enough (possibly too many) knobs we can adjust to build a layout.
While going through the simple examples, I did see certain values that appealed to my personal style. They were, however, usually not the default value. For example, when covering justify-content I thought space-between (evenly distribute available space between elements, spread across available width, leaving no wasted space at left and right edges) looks best, but the default value is actually flex-start (pack elements to the start of flow (left) and leaving empty space to the end (right)). I understand choosing a default value is challenging and I’m ignorant of many of the concerns that went into a final decision. Sometimes the default behavior to “makes sense” are actually inconsistent. For example, the default flex-shrink value is 1, but its counterpart flex-grow has a default value of 0.
After the chaos of JavaScript shorthands, I thought I was freed from that thinking in CSS. No such luck. To specify dynamic scaling behavior in a flexbox, somebody thought it would be useful to combine flex-grow, flex-shrink, and flex-basis parameters into a single flex shorthand. As a beginner, I am not a fan of memorizing an arbitrary order of numbers, but maybe I’ll grow to love it.
The feature of flexbox that most surprised me is ability to flip its two axis with flex-direction. Not only would this let us build right-to-left layouts (for Hebrew, Arabic, etc.) this even hints at the ability to build layout for traditional Chinese layout. (Words top-to-bottom in a column, then columns laid out right-to-left.)
The Codecademy project for flexbox “Tea Cozy” is simultaneously really great and really awful. They gave us a set of images, most of which are pictures to use in a layout except one image which is actually the specification for laying out a page. So we are given a picture of what the result should look like, including some key dimensions, and told to go make it happen. I understand this is highly representative of the workflow of a web developer in charge of laying out a page according to a design specification, so that is really great. But given this course has been short on the “why” of things (each lesson is “do X and Y” instead of the much more useful “Do X and Y to accomplish Z.”) it was difficult to figure out which of the tools we just learned were applicable. I faced a wide knowledge gap between course material and building “Tea Cozy”. Still, I enjoyed the challenge of this exercise. And for better or worse, I did come out of “Tea Cozy” with a better understanding of flexbox.
Outside of Codecademy, I was told about Flexbox Froggy, an interactive game for teaching flexbox. It was fun and the frogs were cute. I doubt anyone could learn the full power of flexbox just from playing this game but seeing how some of the concepts were applied was good review after my course.
The next lesson introduces CSS grid, for layouts where regular spacing makes more sense than the dynamic rules of flexbox. Laying out elements in a grid was very familiar to me, it reminded me of the early days of HTML where I would hack a layout using <TABLE>. The bad news for me is that shorthand-itis is even worse for grid. We started with grid-template-rows and grid-template-columns, then we learn the two can be shortened to grid-template. Similarly, row-gap and column-gap become gap.
Aside: I was annoyed we didn’t have consistency on whether column/row are used as prefix or suffix for these parameters.
Back to the shorthand infestation: Not only do we have shorthand, now we have multiple levels of shorthand. We start with grid-row-start and grid-row-end, which are shortened in grid-row. But that’s not all! Their was the expected counterparts grid-column-start and grid-column-end shortened to grid-column. Then grid-row and grid-column — already shorthand themselves — are shortened into grid-area. Gah!
But CSS grid has more to offer over <TABLE> than just annoying shorthand, it also has ability to control justification and alignment of elements within the grid. But the names of these control knobs are pretty unintuitive and confusing. While I can see how justify-item controls justification of items inside a grid, I don’t understand why justify-content moves the entire grid. Why is the entire grid considered ‘content’? Adding to this confusion is justify-self, which is how an item inside the grid can override justification settings from the container grid. I look at all of this and think “here be dragons.”
I had hoped the project associated with grid would be as hands-on as “Tea Cozy” but it was “merely” laying out the grid in a to-do list, far more straightforward than “Tea Cozy”. Ah well.
Outside of Codecademy: the people who made Flexbox Froggy also made Grid Garden.
After this instructive though occasionally challenging course, CSS Transitions and Animations felt a lot easier.
New Screwdriver 