Sections & containers are some of the most important boxes in web design. They organize & group your content topically, they’re responsible for establishing the content width of your website, and they’re responsible for creating an inline gutter on smaller devices.
In this tutorial, we’re going to take a closer look at some important details related to sections and containers:
◉ The main semantic purpose of sections.
◉ Why almost all sections should have an inner container
◉ When should content be in a container vs not in a container
◉ How to manipulate the width of a container
◉ How different page builders handle the concept of a section element
◉ How to set default section padding
◉ Where the inline padding for your site’s “gutter” should be set
◉ Two methods for adding vertical white space to a section
◉ How to set background colors and background images on sections
◉ Why you should never use a fixed height on sections
◉ Why you should avoid using margins on sections
To close out this training, I show you an example hero section build featuring a full-width background image, dark overlay, and a very traditional content layout with dual buttons as the call to action.
