Elements

Question 1

Sections

Answer 1

A section is a layout element with a width of 100% that extends across the full width of the browser window. Sections play an important role in the structure and layout of a page. Sections let you create separate blocks of content and divide the page into meaningful segments.

Question 2

To have a good, consistent website structure, add sections in the body element, then organize your content in ________ placed inside these sections.

Answer 2

Containers

Question 3

The height of a Section automatically adjusts to its content- as you add elements, the section grows taller. You can set a specific height in the style panel.

Answer 3

Note

Question 4

Combo classes

Answer 4

Combo classes let you add combination styles and are based on the original section class — you can override styles and add style on top of the combo class.

Question 5

Auto height

Answer 5

When you add text and media to a Section, the height changes to define the height. No matter how much content you add, the Section height respects the content inside.

A Section’s padding also affects its height. It’s best practice to set a Section’s top and bottom padding and add content to let it adjust accordingly.

Question 6

Minimum height

Answer 6

To set a specific height on a Section, it’s a good idea to set a min-height (e.g. 500px) so the Section can expand with its content.

If you set a normal height, content will eventually spill out or get cut off.

Question 7

When should you use components?

Answer 7

Components allow you to maintain a consistent, efficient, and scalable design workflow by creating customizable blocks from elements and child elements. Reuse those blocks across your site, and modify them in a single place to avoid individually revising each recurring layout.

Question 8

What are the two ways you can use components?

Answer 8

1. Create identical content per instance. Create identical copies of recurring layouts that have the exact same content, like nav bars, footers, and sign-up forms. Edit them in one place and see those changes impact every instance of that component.
2. Create unique content per instance. Modify recurring layouts with different text, image, video, or rich text to maintain a consistent design while giving each instance unique content.

Question 9

Container

Answer 9

The container element is useful for keeping your content neatly organized toward the center of the screen. It’s typically used in tandem with a section element.

Question 10

What is the anatomy of a container?

Answer 10

A container is a div block with predefined styles. It has a 940-pixel max-width on larger displays to keep your content centered relative to the browser window. On smaller devices (like phones and tablets), containers extend the full width of the screen.