Building the Hero section
In order to get started, let's quickly map out the content boxes we anticipate building based on the designs. Figure 4.4 shows one way we can do this. You'll notice that the background image is in its own box, as are the headings, buttons, and screenshot images. Altogether, they form bigger boxes that make up the full Hero section:
Figure 4.4 – The content boxes of the Hero section
Taking the time to plan out the course of action this way – especially if you're brand new at web design and development – is a good practice that can help you plan ahead. With enough repetition, this will become second nature, and you'll be able to do much of it in your head.
Now that we have an idea of how the content in the Hero section can be split up, let's start building it out. We'll tackle the Hero section by breaking it down into smaller bits. First, let's tackle the background image.
...