This video is available to students only

The Hero Section Revisited

Let's revisit the Hero section from Module 1 and build it for real using the primitives we have learned.

In Module 1, we introduced the concept of composition by analyzing this Hero mockup:

The Hero composition breakdown

At that time, we glossed over the implementation of each of the layout primitives. Now that we have built a complete set of layout primitives, I thought it would be good to revisit the Hero section from Module 1 and build it for real, using the primitives we have learned.

In this lesson, we will be using the Bedrock Layout Primitives library. It has all the primitives we built in this course, plus a couple of other tools to help lay out your website.

The problem: the Hero Revisited#

In this lesson, we are going to build this:

The Hero red-line

We have a menu on top and two equal width areas below it. The area on the left will have a vertically centered "Call-to-action" section. The right side will have an image that will cover the area, maintaining an aspect ratio. There will be a small gutter between each of these areas.

A word on accessibility#

Before we get into the solution, I want to point out an important issue that often gets overlooked, even by experienced developers. That issue is accessibility. Our webpages are not just used by fully sighted users with no physical limitations. We have all kinds of users with various needs, and our webpage should accommodate them.

Whole courses have been written on accessibility, but one of the biggest mistakes developers make that render their web page inaccessible is not using the correct semantic markup. Semantic markup lets screen readers communicate to the user the intended use of a section. You can wrap an unordered list in a div and style it to look like navigation, but the screen reader wouldn't communicate that to the user. Simply wrapping it in a nav instead tells a screenreader that this is a list of navigation links.

It might seem simple, but using the correct semantic tag will do much to improve your web page's accessibility.

The solution#

With that in mind, let's look at the markup for this Hero - and you can follow along at the codesandbox.io start project:

Which looks like this:

The Hero red-line
 

This page is a preview of Composing Layouts in React

Start a new discussion. All notification go to the author.