Transcript
Here is the link to review the final project we are going to make in the Capstone.
In this lesson, we won't write any code. We will just review how to approach dissecting a website layout.
In reviewing or creating a website design, you will find that many elements share characteristics.
The first one that I often begin styling with is typography and colors. As you can see on this design, you can note a commonality between the typeface used for all headlines, and then you can also see it used in some smaller elements such as the price on the tour packages.
You can also see that the page is subdivided into many sections to relate a hierarchy of information available.
The use of alignment and what is called "white space" in addition to background textures and colors helps define the various sections of the layout.
Being able to look at a website layout in terms of sections of the layout will help us break down and define the style rules that we need to create.
We can start to identify components as well, such as what we call "cards" for the tour packages. Here you begin to note that each card shares the same visual properties: a header image, a headline and price, some body copy, and a button. This will help inform how we structure our HTML, and how we begin to define names for various elements, and identify what is reusable styles versus what is specific to just a component type.
For example, we know that these are headlines, but we are also using the same font for this intro text. So, we need a way to assign the font both to the headline and also make it available for specific instances that maybe don't semantically fit being a headline. Learning to recognize those utilities early on prevents writing a lot of duplicated styles down the road.
You can also begin to notice what styles are very specific to a particular instance. For example, the rocket and its animation that we have in the header only. Or, the stars graphic that only appears in the "About" section. Compared to the reuse of the starry background in the hero area as well as the tour packages section
Going to our second page, we also see that we have repeated the hero patterns. And so we can note that this is a template area which affects the specificity that we will define our rules for the section.
You may have also noticed smaller common elements such as the buttons both here on this form as well as on the tour package cards.
As we continue through the Capstone course, you will gain confidence in recognizing global Styles versus layout section specific styles, and recognize what makes up a component or what may be best served as a utility style for flexible reuse.