Class 8: Review of Page Layout

Tasks to complete for this class

1. Make sure that you review the content that is provided here as well as the associated videos that come with each section. You will be responsible for the content that is presented in the videos embedded here.
2. It is recommended that you use a Chromium-based browser (Brave, Chrome, Edge) or Firefox Developer Edition (opens in a new tab) for web development. Each of these has a developer tools menu that will be very helpful.

Designing a webpage with CSS Layout features in mind

For the start of today's class, it would make sense to do this small review on divs and spans, as well as to think about how to design a webpage keeping in mind what we know about CSS. Today will be about introducing how css layouts work, which will allow us to design webpages how we want.

The above 10 min video (opens in a new tab) will orient us for the day and review important aspects of the course so far, like:

• why sketching is important for website design
• how we can create both inline and block elements to help style our pages
• reviewing CSS IDs and classes

Context Selectors and Wildcards

In addition to classes and IDs, there are other ways for you to selectively apply HTML elements. This can be done via context selectors.

This short video (opens in a new tab) shows me fumbling around with the different selectors and wildcards. Make sure you play around with them as you are watching the video!

Self-Assess Review Activity

While I don't tend to include these self-assessments often, because we have done so much review, I thought it would make sense for us to have one here.

Please follow along with this shorter video (opens in a new tab) that goes through a self-assessment. I would encourage you to stop and to try to answer the questions before moving forward! If you are not sure what the answer is, don't give up! Use that as a point of knowledge for your upcoming assessment, figure out the answer, and then watch the explanation afterwards!

So it would be important for an assessment for you to:

• understand and how div and span differ as HTML elements
• understand the precedence system CSS follows when applying CSS rules in a hierarchical HTML file

Layout Basics and the Box Model

When thinking about layout, we first have to review, how things are laid out on a webpage in the first place normally. Remember that with block and inline elements as they are rendered traditionally, block elements take up the entire width of the the page and stack vertically, while inline elements merely get placed left to right within a block element.

FYI: - There is another way of laying out elements that has grown in popularity that is called flexbox. We will not be covering it in this class, but you can either look at the Additional Resources section to look for additional videos on it, or you can go directly to the Mozilla Flexbox Documentation (opens in a new tab) to learn more how to use flexbox for one dimensional layouts.

The CSS Box Model is what is used to affect the layout and size of all (block & inline) elements.

Courtesy of Wikimedia Commons (opens in a new tab)

Based off of this model, the size of an element consists of:

• size of the actual content (C)
• the content's padding or inner space (P)
• the thickness of the border (B)
• the content's margin or outer space (M)

So in calculating say the width of an element, you have to take into account the padding, border and margin's twice and add it to the width of the content, since the padding, border and margin appear on both sides of the content. Here's the obligatory scary width calculation

W = C + 2P + 2B + 2M

This video about the basics of layout and the box model (opens in a new tab) would be good to review.

Borders, Padding, & Margins

Now that we know about the box model, we can now start to explore how to be able to specify the correct properties for borders, padding and margins. Understand that all of these can be further subdivided into applying tweaks to different sections:

• top
• bottom
• left
• right

Padding

padding (opens in a new tab) is the space between the content and the border that you would specify. We can specify this in a number of ways including:

• using ems
• as a percentage
• via pixels

Margins

Similar to padding, margin (opens in a new tab) follows the same constructs to help specify the amount of space.

However, for margin the space that you are specifying is outside of the border, like our box model example from above.

Borders

For border (opens in a new tab), you can end up specifying:

• the style of the border (eg dashed)
• the width of the border
• the color of the border

Just like padding and margins, borders can also be divided into different sections (top, bottom, left, right)

To review all of this in real-time, please watch this video (opens in a new tab) that reviews these concepts in a slightly more dynamic format.

Second Self-Assess

Finally, we have a 2 min video (opens in a new tab) that you can use to gauge your understanding for how to calculate widths and to then also to try to figure out how to match a particular screen's output via CSS.

Additional Resources

(Optional) If you would like to know more about CSS (or watch videos from someone that does not sound like me) You can Watch select training videos via Pacific Lynda (opens in a new tab):

• CSS Essential Training 1 (opens in a new tab) by Christina Truong (opens in a new tab)
• CSS Essential Training 2 (opens in a new tab) by Christina Truong (opens in a new tab)
• CSS Essential Training 3 (opens in a new tab) by Christina Truong (opens in a new tab)

Warning: I would not watch all the videos here in sequence. As much of this is repetition, and you should instead just go and play in VS Code! Instead, I would recommend that you just watch videos that you may want to know more about. For example, you may be interested in flexbox since I don't necessarily cover this much here. While you will not be tested on this, if you are interested it makes sense to learn more about it. (Plus it looks good on your resume)