Web Structure

Web Structure

New

Intro to HTML & CSS

Intro to HTML & CSS

New

3:38

HTML Structure

HTML Structure

New

1:55

The Box Model

The Box Model

New

1:54

Responsive Design

Responsive Design

New

Intro to Responsive Design

Intro to Responsive Design

New

2:21

CSS Layout

CSS Layout

New

Intro to Web Layout

Intro to Web Layout

New

2:27

Intro to Flexbox

Intro to Flexbox

New

2:27

Grid layouts overview

Grid layouts overview

New

4:18

Width & Height Units

Width & Height Units

New

3:59

Positioning Overview

Positioning Overview

New

1:48

Intro to 3D

Intro to 3D

New

2:25

Images & Colors

Images & Colors

New

Image Resolution

Image Resolution

New

3:28

Image File Types (GIF, PNG, SVG, JPEG)

Image File Types (GIF, PNG, SVG, JPEG)

New

2:22

Color values (HEX, RGBA, color names)

Color values (HEX, RGBA, color names)

New

3:22

Dynamic Content

Dynamic Content

New

Intro to Dynamic Content

Intro to Dynamic Content

New

1:36

SEO

SEO

New

Intro to Paid vs. Organic Search

Intro to Paid vs. Organic Search

New

1:34

Intro to 301 Redirects

Intro to 301 Redirects

New

2:39

new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

The box model describes how layout works on the web. Unlike other design environments (like Photoshop or Sketch) that allow you to position elements anywhere in a given document, the web places elements in boxes that you control the positioning of to indirectly create layouts. In this video, we’ll discuss:

  1. The box model
  2. How the box model facilitates responsive web design
  3. Grouping boxes
  4. Positioning boxes to create layouts

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets

Transcript

This is a basic web document. It's simple, and it's made of up a heading, some text, a few images, and some illegibly small buttons.

Each of these elements is treated as a box — you can imagine an invisible boundary on each of them. These boxes sit next to each other and stack on top of one another depending on the properties we give them.

It's helpful to think of web content not like a PowerPoint document, where content is simply positioned wherever — completely non-responsive and stuck in a fixed slide...but more like a Word document — where content flows naturally from the top-left of the page.

At first, this might seem kind of rigid. But it actually gives us tremendous flexibility as we create layouts for all kinds of screen sizes and devices.

Think again about PowerPoint. Looks great on a wide screen like this. But what if we try to scale it down to a phone? Not so great.

But a web document? Again, this content flows naturally.

The other great thing about the box model is that we can organize boxes inside of other boxes. Headings? That's a box. Paragraphs? That's a box? Images? That's a broccoli box, a Bach box, a Brach's box, a Barack box, and of course, who could forget: the box box.

And since we've put all these boxes in another box, that box can be used to organize and style the boxes inside!

Here's a practical example of a layout we might encounter on the web. Since each of the elements inside are boxes — we can move and push content around using padding to affect the space inside of a box, and margin to affect the space outside of a box (in between that box and the boxes around it).

The big takeaway here is that the web is responsive. We can add all sorts of content to our document and it naturally flows like content in a Word document. Each element on the web is its own box. They can stack. They can wrap. They sit next to each other. And we control the styling and the layout of each and every box on the page.