Chapter Overview

Get an overview of what we have covered in this chapter.

We'll cover the following

Congratulations

We’ve seen many different techniques, tips, and tricks for working with layouts in this chapter. We learned all the following skills:

  • Copying CSS from another layout into ours

  • Locating and manipulating CSS in developer tools

  • Unminifing CSS files in the browser

  • Pasting CSS into DevTools

  • Working with the "Elements" panel

  • Using the command launcher and the "Coverage" command to check for unused CSS

  • Saving our layouts to our local machine

  • Creatively using negative margins

  • Combining background photos and inserting shadows to instantly colorize a drab background

At this point, we might think that the layout needs some additional improvements before we can call it done. However, the goal of the first six chapters of this course is not to learn how to build complete layouts but to learn the workflow, process, and techniques. We want to be able to look at a blank screen—or a fundamental Bootstrap starter theme—and know the various ways in which we can update the theme.

We’ve seen how we can take a dull background and change it into an image and then color those images any way we want, using the inset box-shadow property. Each of these simple tricks doesn’t do much on its own, but when we combine them, we get a powerful mix that allows us to come up with our own ideas easily.

Get hands-on with 1400+ tech skills courses.