CSS layout has grown and evolved into a robust set of tools to accomplish some fantastic modern layouts.
The problem is that we are still teaching CSS as something that is" hacked" together by using" tricks" to get our desired web layouts.
Learning CSS like this typically leads us down one of two paths: We either build fragile page layouts using 
the "see what sticks" method of CSS, or we give up and declare that CSS is too tricky and bring in an X column grid system like Twitter Bootstrap.

Creating page layouts in CSS doesn't have to be complicated. Like how you make much of your everyday speech using just a small 
subset of vocabulary composed together, you can achieve sophisticated layouts by composing simple low-level layout primitives in unique ways.

In this course, you will learn foundational layout primitives that you can use to build many of your more complex layouts. You will also learn 
how to apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. To do this, we 
will recreate many of the layouts found in the wild using the principles mentioned above.

This course does not require extensive knowledge of CSS. It does assume that you have a basic understanding of the CSS box model, CSS specificity, 
CSS selectors, and CSS sizing units. Though you can apply the principles in this course to any modern web framework, including no framework 
development, this course will be using React and assume you have a basic understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level. This course will 
teach you the practical skills you need to build modern layouts for the web without depending on heavy CSS frameworks. Unlike courses and blog 
posts that teach each layout property in isolation, our product teaches practical layout patterns that you can use every day when solving your 
layout challenges.

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives.
Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

Composing Layouts in React

---
title: How to Build Accessible Navigation Divs in React
slug: hero-revisited
description: Let's revisit the Hero section from Module 1 and build it for real using the primitives we have learned.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/j6tmpx08gl
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_04/lesson_05
---

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

![The Hero composition breakdown](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.05/public/assets/hero-breakdown.png)

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](https://bedrock-layout.dev/) 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](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.05/public/assets/hero-red-line.png)

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](https://codesandbox.io/s/the-hero-revisited-starter-75g52?file=/src/Hero.jsx):

```jsx { actualFilename=./protected/hero-0.js endLine=45 startLine=5 url=https&#x3A;//gitlab.com/fullstackio/books/composing-layouts-in-react/module_04/lesson_04.05/protected/hero-0.js#L5 }
export default function Hero() {
  return (
    <header>
      <div>
        <h1>Arrow Data</h1>

        <nav>
          <ul>
            <li>Solutions</li>
            <li>Pricing</li>
            <li>Docs</li>
            <li>More</li>
          </ul>
        </nav>

        <div>
          <a href="/#">Sign in</a>
          <button>Sign up</button>
        </div>
      </div>

      <div>
        <section>
          <h2>Data Solutions</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc vel
            risus commodo viverra maecenas. Magna sit amet purus gravida quis
            blandit turpis cursus.
          </p>
          <div>
            <button>Get Started</button>
            <button>Live Demo</button>
          </div>
        </section>

        <img src={dataImage} alt="" />
      </div>
    </header>
  );
}
```

Which looks like this:

![The Hero red-line](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_04/lesson_04.05/public/assets/hero-0.png)

The first thing we need to do is stack our menu on top of everything. So let's use our Stack primitive as a `header` and give it a `sm` gutter:

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