Join Morten Rand-Hendriksen for an in-depth discussion in this video Designing with boxes, part of Making Sense of the CSS Box Model.
- Before we dive any deeper into the CSS box model, … let's take a step back and look at what the realization … that the web is made of boxes … means for the web design and development process. … If you ask me, I think a comprehensive understanding … of the CSS box model is the most important skill … for anyone working as a web designer and developer. … Knowing on a fundamental level … that the web is made of boxes … makes the process of designing and developing a site … to look and function the way you want … into a simple task of creating and stacking … boxes of content. … So let me show you what I mean. … Most of my web design projects start with a simple idea … and pen and paper or a whiteboard. … Starting with the core content, a video, … an article, some sort of content model, … I sketch out in rough terms what I envision … it will look like. … This is wire framing and rapid prototyping … at its very simplest and most effective. … Once I have a general sketch … of what the core content will look like, …
- 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