Laying It All Out
Transform previous work into a more manageable set of templates and page layouts that can be easily reused and updated, all while learning styling and aspects of modern site design.
This chapter is from the book
This chapter is from the book
This chapter is from the book
Now that we’ve got a good base of CSS knowledge, it’s time to learn how to put everything together into a real website. This chapter and the next is where we really kick things into high gear, with material you’re unlikely to see in any other CSS tutorial. To get started, our first step will be to transform our previous work into a more manageable set of templates and page layouts that can be easily reused and updated (in accordance with the DRY principle (Box 5.2)).
Along the way, we’ll add more styling as a way to learn more complex aspects of CSS, while refining our design to be more suitable for use as a personal or business website. Combined with Chapter 10, the result will be a professional-grade example that shows a variety of aspects of modern site design.
9.1 Layout Basics
There are an infinite number of ways that you can design content layouts for the Web, but over the years certain conventions have become common to many sites, as shown in Figure 9.1. These may include elements like a header that contains site navigation and a logo (which typically links to the homepage); a hero section (Section 7.7); paragraph-style content with optional asides; and a page footer containing repetition of some elements from the header, as well as things like links to About or Contact pages, privacy policy, etc. These commonalities are the result of years of trial and error, and by incorporating such familiar elements into our site, we help new visitors orient themselves and find what they’re looking for.
)
Figure 9.1: Elements of a typical web page.
One thing you may notice from Figure 9.1 is that many elements, such as the header and footer, are the same (or nearly the same) on every page of our site. If we made each page by hand, that would make our markup ridiculously repetitive—if we wanted to make a change, updating all those pages would be a nightmare.
This is an issue we faced repeatedly in Part I, where we simply copied and pasted common elements like navigation links onto every individual page. Such repetition is a violation of the DRY principle (Box 5.2), and in Box 3.2 we promised to teach you how to use a templating system to solve this problem. In this section, we’ll fulfill this promise by installing and using the Jekyll static site generator to eliminate duplication in our layout.