Making Sense of the CSS Box Model

Based on old-school typography blocks, the CSS box model is the key to modern web design. Once you master it, you can build any layout you want—and troubleshoot most of the common CSS alignment and positioning woes. In this course, Morten Rand-Hendriksen offers a “four course meal” approach to the CSS box model, breaking it down into easily digestible chunks. He covers techniques such as styling text and images, floating content, using display properties, and positioning elements. He also explores the brave new world of modern layout modules, discussing Float, Flex, and Grid and how they can work together. Each lesson is supported by real-world demonstrations of the concepts in action, and Morten closes with a “nightcap” that will get you thinking about going further with CSS.

Topics include:

• Designing with boxes
• The origin of the box in typography
• What is the CSS box model?
• Changing the contents within the box
• Floating and clearing content
• Using the clearfix
• Working with Float, Flex, and Grid
• CSS shapes

About the Author

Morten Rand-Hendriksen is a web designer and developer.

Morten has a passion for clean design, standards-based code, and open-source software like WordPress. He has published several books, articles, and videos on these topics and is a popular speaker at conferences. Running a small boutique-style digital media company, he divides his time evenly between building web solutions and teaching others how to do things right and get the most out of the web. Morten grew up in Norway and made Canada his home in 2002.

Product Details

• Full Video Tutorials
• Video File Format: MP4
• Skill Level: Beginner
• Video Duration: 1h 11m
• Instructor: Morten Rand-Hendriksen