Summary

In this chapter, we completed turning the rest of the SecondPlate landing page into a fully responsive website, all built without code.

We took responsive design concepts that we were introduced to in Chapter 4, Building Above the Fold, and repeated a lot of it here, with some new twists.

Specifically, we saw how our changes cascade from larger breakpoints to smaller ones and how they can be overridden as needed.

We also saw how flex and grid layouts can be adjusted at different breakpoints as well. Flex layouts can have their orientations changed from being horizontal to vertical and vice versa, which helps with adapting to different sizes of screens. The order of their content can also be reversed as appropriate.

Grid layouts, as we saw, can also be customized by adding and removing columns and rows, or by expanding the space taken by a cell. These flexibilities allow us to create multiple types of layouts that can fit different breakpoint sizes.

We repeated...