Chapter 8: CSS Box Model

A Complete Frontend Developer Textbook for Beginners (2023 Edition)

Published in

Silicon Wat University

10 min readJan 4, 2022

This is the textbook version of Lesson 8 of 100 from the Udemy video course: A Complete Frontend Developer Course for Beginners

This lesson covers the following HTML tags, CSS properties, and JavaScript commands for the first time:

None.

None.

This lesson begins with this Codepen. Code along with me to increase retention!

In the last lesson, we learned how to add dimensions to any sectioning tags.

<html>
   <head></head>
   <body>
      <header></header>
      <main></main>
      <footer></footer>
   </body>
</html>

In fact, we can add a width and a height to any HTML elements.

The reason this is possible is because per CSS, everything has a box around it.