In order to have a better understanding of the layout and the elements of the page, let's draw a layout diagram to break down the structure. In this diagram, we do not need to include every element that will appear on the page. We only need those that will be good enough for us to verify our plan of how to structure the UI. We will give each element in the diagram a name, which will be their class names that we will use in the code. This practice in drawing a layout diagram can be seen as a kind of rehearsal for code writing. It is helpful for those developers who are not familiar with frontend development. Sometimes, experienced frontend engineers will also find it useful when building a complex UI. Once you have completed the diagram, you will be able to write your code more confidently and more quickly. 

Figure 9.2 is the layout diagram of the register page:

As you can see, in this diagram we only include high-level structure elements, except .copyright at the bottom. Everything is wrapped inside .container. We put the main body of the page inside .row and keep the footer separately inside .footer. .register-form is for grouping the logo, the tagline, and the form together. It also helps to hold a fixed width and be positioned in the center horizontally. Now, this looks good enough, so let's write the code.