BWC Bootcamp Recap: Week 2

Congratulations, friends and learners, on completing week 2 of Bad Website Club’s free web dev bootcamp! Here’s your weekly recap of the major topics we’ve covered.

Also check out week 2’s extra post, a review of CSS selectors! They’ll come in handy as you continue your CSS journey.

Before we start, here are some review questions. Once again, I strongly encourage you to try your best to answer each one before moving on—and remember, the important part isn’t whether you get them correct, the important part is just to exercise your memory by attempting it!

Quiz yourself!

1. What’s the difference between margin and padding?
2. What’s the semantic meaning of a span element?
3. Which property would you use to turn an element into a flex container?
4. If you have a flex container with a flex-direction of row, which property can you use to vertically center the flex items within the container? (PS: this is a hard one—it’s okay to not have this memorized, you can always just look it up when you need it!)
5. What’s one way we learned to make the text on your page more readable?

Recap

The box model (Rothko painting lesson)

The term ”box model” refers to the “conceptual rectangles” that surround every HTML element. It’s almost like layers of an onion.

(Image from freeCodeCamp)

At the center, there’s the content box—the size of the element itself. The next layer out is the padding box, which is empty space inside the border of an element. Next comes the border box, which accounts for the thickness of any border you set. And last is the margin box, which is space outside the border that pushes elements away from one another. You typically won’t see all of these boxes on every element, because some of them will often be set to 0 thickness.

When you don’t use CSS to specify the size of margin, border, and padding, the web browser will apply its own default values. These defaults vary from one browser to another. Therefore, it’s very helpful to specify your own values for the box model properties.

The box-sizing property controls how an element’s height and width are counted. The default value is content-box. Under this setting, if you give an element width: 100px, then the content box will be 100px wide and any borders or padding will be added on top of that 100px, making the overall element bigger than 100px. The alternative is border-box, which includes the border and the padding as part of the width and height. If you have that 100px-wide element set to box-sizing: border-box, and it has some thickness of border and padding applied, then the outer edges of the border will measure 100px wide, and the content box will get smaller than 100px. I think this is best understood by just playing around with it yourself!

We learned another important lesson during the Rothko exercise: Vertical margins behave in unexpected ways sometimes! Recall that at one point, we tried adding some margin to one of the rectangles in the painting, but it ended up pushing the whole canvas down instead of just pushing the rectangle down. This was due to a phenomenon called margin collapse. It happens when the margin of one element extends out through the margin of its parent element. freeCodeCamp said the solution was to give the rectangle something “solid” to push against, so we added some padding to the canvas (the parent of the rectangle), and then the margins started behaving as expected. (Padding and borders are examples of “something solid.”)

To avoid this problem, if you want to put space between a child element and its parent, then it’s better to apply padding to the parent instead of applying margin to the child.

Margin collapse is pretty complicated, and I don’t recommend worrying about all the details of it while you’re still learning the basics of CSS. It’s just helpful to know that, if you ever see that your vertical spacing is coming out different than you expected and you can’t find where your mistake was, it might not be a mistake after all. And whenever that happens, one possible solution is to try using padding instead of margin.

Flexbox (cat photo gallery lesson)

Flexbox is a simple way to arrange items on the page. You apply display: flex on a parent element to make it into a flex container, and then all its direct child elements become flex items. The flex items get neatly distributed across the flex container. You can choose to arrange the flex items in either a row or a column.

One tricky thing about flexbox is that we don’t talk about the lines being horizontal or vertical. Instead, the direction that the row or column follows is called the main axis, and the perpendicular direction is called the cross axis. Properties like justify-content and align-items will give different results depending on whether the main axis is a row or column. (”Justify” properties refer to the main axis alignment, and “align” properties refer to the cross axis alignment.)

Flexbox creates a one-dimensional layout: it takes all the child elements of the flex container and arranges them in a line, and then if the line is too long to fit in the container, it can optionally wrap down onto multiple lines. It’s important to remember that, even when it ends up wrapping into multiple lines and making a layout that appears to have rows and columns, it’s still behaving as just a single line. Think of your flexbox content more like a line of text: like a long sentence, it just wraps around to the next line when it reaches the end of the page.

(But what if you do want to control your layout in rows and columns instead? Later in the course we’ll learn about CSS grid, which solves that problem!)

In the “learn accessibility by building a quiz” lesson, we saw flexbox used to space out the links in the navigation bar. This is a very common use case! Flexbox makes it super easy to space things out in consistent intervals, and it’s extra handy for lists (like navigation menus) because it adapts to the user’s text direction. If someone translated our quiz page into a right-to-left language like Arabic, flexbox would automatically put the first link on the right instead of the left.

A really great way to learn more about flexbox is to play this super cute interactive game called Flexbox Froggy! It really helps with visualizing what the different properties mean.

There’s also a great visual guide to flexbox from CSS Tricks, which I often use as a reference to figure out which properties I need to get the layout I want. (Remember that it’s totally okay to use references while you’re building websites, you don’t need to memorize everything!)

Typography (nutrition label lesson)

There were really not any major new concepts in this lesson! Instead, we put together many of the skills we already learned to demonstrate how finely we can control the appearance of our text.

We did meet the <span> element for the first time, though! This element is mainly used for styling a short span of text, and often used inside of other text elements like <p>. It’s an inline element, unlike <p>, which is a block element. (Remember that a block element takes up the full width of its parent, but an inline element can fit in the same line with others.)

I also want to draw attention to one subtler part of the lesson: the way we used two complementary approaches to making classes.

In most of our lessons so far, we’ve created classes that correspond to specific kinds of elements. For example, in the cafe menu lesson we had a class for coffee flavors and a class for prices, and in the colored markers lesson, each marker had its own class. The CSS rules for those classes had a list of several properties that were visually unrelated, but instead grouped together by the semantic purpose of the class—like, “all the styles needed to make this look like a green marker.”

We still used this approach a little bit in the nutrition label lesson, like when we made the class calories-info to give unique styles to that one part of the label, based on its content. But most of the classes that we wrote for the nutrition label were not tied to their content like this.

Instead, many of the classes had names like bold, indent, or sm-text. They didn’t refer to what the content of those elements would be; instead they were reusable classes that held a set of visually related properties, and we applied them to many different elements throughout the label. This approach might be described with terms like “utility classes” or “functional CSS”.

When you’re planning out how to write your CSS, it can be useful to think about how styles might need to get repeated across your project. Sometimes it’s most efficient to create “semantic” classes like calories-info that refer to what their content is, and group together several styles at once. Other times, like if you have many different elements that need bold text but might have different sizes, then maybe it would be more efficient to write a more generic bold-text class and apply it to all those different kinds of elements, so that you can write out the font-weight property just once instead of needing to add that line into several different classes.

It’s also helpful to think about how you might want to change your CSS in the future, and how to write classes in a way that makes it easier to change things. For example, if you decided that you want all your bold text to have font-weight: 900 instead of font-weight: 800, the using one single bold-text class would mean you only need to update that value in one place.

There’s no right or wrong approach here, though! You don’t have to overthink it, just organize your CSS in whatever way makes sense to you.

Odds and ends

A few smaller things that were scattered throughout this week’s lessons:

• To restore a CSS property to its default value (as if you never had mentioned it), use the value unset. For example, margin: unset; will apply the default margin set by the browser. This is useful if you want to apply a CSS rule to a large group of elements, but then have just one specific element where you want to “undo” that rule.

• Relatedly, remember that CSS rules generally get applied in order from top to bottom of the CSS file—so if you’re doing that “general rule then a more specific rule to override it” thing, make sure the more specific one comes later in the file!

• In the Rothko painting lesson, we learned some fun ways to make our “conceptual rectangles” a little less rectangular. The border-radius property rounds the corners of an element. filter: blur() creates a fuzzy, blurry effect, and transform: rotate() changes what angle the rectangle sits at. Try looking up these properties and functions on MDN for more info and examples!

• The object-fit property changes the way an image fits into its rectangle, and particularly, what happens when the rectangle gets squished—like we saw happen when images are put into a flexbox container with no wrap. By default, the image will get stretched and warped, but if we set object-fit: cover then it will maintain its aspect ratio and get cropped to fit instead.

• The flexbox lesson showed us the pseudo-element ::after. (We’ll talk more about pseudo-elements later!) We used the selector .container::after to create a new, empty element as the last child of the element with the class container . Take a second to think about how wild that is! Normally, it’s the job of HTML to create all of the content and the job of CSS just to style it, but this is an exception where CSS is actually creating a new object on the page! It’s a big power that comes with big responsibility. Since it kind of breaks the rules about the roles of HTML and CSS, we need to be careful about how we use it.

Next week

Since we only got part of the way through the accessibility lesson, I’ll recap that one as part of week 3. We have some fun new topics to look forward to in week 3, too: tables, pseudo-selectors, more CSS art, and finally, how to make our pages responsive to different screen sizes!

I hope you’re getting more comfortable with CSS and HTML by now! How are your projects coming along? I’m looking forward to seeing what you all create!

As always, if you have questions about this material or if there’s anything else that you struggled with from week 2, please do leave a comment on this post, or ask a question in the Bad Website Club Discord or the freeCodeCamp forum! Take care, friends!

Quiz answers

1. Margin is the empty space around an element. Padding is empty space inside the element.
2. Trick question! Span is sort of like the inline equivalent of div—it doesn’t have any semantic meaning and it’s mainly used for applying styles to a particular chunk of text.
3. display: flex;
4. align-items: center;
5. One method that we learned in the Typography lessons is to use margin and padding to create space between different text items. There are surely others too! Like making sure there’s enough contrast between the text color and background color, or choosing legible fonts.

Cover art by Kiri!