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 lesson from MDN. 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

This section contains questions for you to check your understanding of this lesson on your own. If you’re having trouble answering a question, click it and review the material it links to.

• 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.