There are nine units in Lambda School’s Full Stack Web Development Pre-course. I’m going to summarize what the pre-course covers for each of them. This material is basically ground-floor information that students need to know before they start the full course.

Learn about the Box Model and be able to explain its properties

The fifth lesson introduces us to the Box Model, which is the idea that every HTML element on a page is in a box. So, every time we create a paragraph, span, div or insert an image onto a web page (along with everything else we’ve learned so far, like ordered and unordered lists and headers) that element is enclosed in a box.

The box that the element is in has 2-dimensional properties; namely height and width. Because of this it has 4 sides: a top, bottom, left and right side. We can manipulate the following properties of these sides via HTML:

• height and width
• margins
• border
• padding

1. The center of the box contains our content, be it text or an image. We can manipulate the color of the text, the background color and its height and width (generally in pixels).
2. Surrounding the box is an area called padding. Padding is the same color as the background color of the content. Its thickness can be manipulated, which essentially puts something like white space around the content – albeit white space that’s the same color as the content’s background. The thickness of each side of the padding can be set independently of the other sides (for example, a thicker bottom, thin sides and medium-sized top – all in pixels) or it can all be set to the same thickness.
3. Outside of the padding is the border. Think of it as a picture frame. We can control the width (thickness) of the border, its style (there are a bunch included in CSS, apparently, like solid lines, dashes and dots) and its color using color names or a variety of codes.
4. Finally, there’s the margin, which is like padding, but outside of the border. Its invisible, so we can’t control its color, but we can control the thickness of each of its four sides. It essentially pushes the content, padding and border away from anything to any of its sides – its like personal space for a web page element.

I have a critique of this lesson’s video. Namely, it opens by creating a div in HTML with a paragraph in it. Text is added to the paragraph. This is all fine – however, then the div is assigned a class, with no explanation of what a class is, in either the video or the text. CSS is then used to manipulate this class and affect the div and its contents, hence the changes to its content size and colors, padding, border and margin. I think that “class” should have at least been briefly summarized so that those of us who are new to HTML and programming would have an idea of what it is.

From what I can tell, it looks like it assigned a name to that particular div before its properties were manipulated. Since its the only thing onscreen, I don’t see the benefit in doing this instead of just manipulating the div itself, but I might be missing something without knowledge of what a class is and why one was assigned to the div.

The video wraps up by explaining to us that the position and overall size of the content might change based on the dimensions of its surrounding properties. Basically, if we have content that 200 pixels wide and 100 pixels high, but we increase the size of its padding, border or margin, it makes the total element bigger and affects its placement onscreen (placement is changed visually mainly by increasing the margin size, since its invisible).

• Lambda School Full-Stack/Web Developer Pre-course Index