lesson-example.md

Introduction

This example takes snippets from the Box Model lesson in Foundations (with some tweaks), and is meant to show how an authored project might look after following the style guide.

Now that you understand the basic syntax of HTML and CSS, we’re going to get serious. The most important skills you need to master with CSS are positioning and layout. Changing fonts and colors is a crucial skill, but being able to put things exactly where you want them on a webpage is even more crucial. After all, how many webpages can you find where absolutely every element is just stacked one on top of another?

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

• What the box model is
• Margins, padding, and borders

The box model

The first important concept that you need to understand to be successful in CSS is the box model. It isn’t complicated, but skipping over it now will cause you much frustration down the line.

Everything is a box

Every single thing on a webpage is a rectangular box. These boxes can have other boxes in them and can sit alongside one another.

Another section

This section isn't in the original lesson, but we wanted to show what adding an additional custom section would look like.

Assignment

1. Because the box model concept is so incredibly fundamental, check out this MDN lesson on the box model. It covers the same material as the video above, but it goes a little further in depth. Pay close attention to the examples and take the time to experiment with their in-browser editor!

   • This isn't in the original lesson, but if we wanted users to only read certain sections, we would include them here. For example, we could tell users to only read the below sections in the MDN page linked above.
   • Parts of a box
   • The standard CSS box model
   • The alternative CSS box model

Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson. If you can't answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

• From inside to outside, what is the order of box-model properties?

Additional resources

This section contains helpful links to related content. It isn't required, so consider it supplemental.

• It looks like this lesson doesn't have any additional resources yet. Help us expand this section by contributing to our curriculum.