How to Add Content to Your Body

Welcome Back!

Where we left off - GitHub

What we're doing today:

• Adding content to the main body

---

Time for the chit chat

Now we have divided our component into a component tree and developed the areas in the DOM specifically for the content (body and footer), we can add the content.

First things first, following the principles of TDD we need to write a test within Title.test.js for the secondary heading as per the design.

test('secondary header is visible', () => {
  render(<Title />)

  const secondaryHeading = 'Full-Stack Engineer'
  screen.getByText(secondaryHeading)
})

Now running the test will fail due to us not adding the content into the Title component. However, before we can do that we need to check the design.

When creating my design I first what is called a wireframe.

Wireframing is a way to design a website service at the structural level.

From the wireframe I researched the standard pixel height for the different heading levels and using those standards designed with those specific headings in mind.

Now we can reference that wireframe with the correct heading, which for the secondary heading is <h3>.

function Title() {
  return (
    <div>
      <h1>
        Samuel Preston
      </h1>
      <h3>
        Full-Stack Engineer
      </h3>
    </div>
  )
}

Now the test passes because the content is visible when the Title component is mounted. However, the Title component isn't where we want it on the DOM:

To fix this we need to create a Title.css file and import it, I have already developed the CSS ahead of time, so here it is:

.title {
  color: white;
  text-align: center;
}

.main-title {
  padding-top: 1rem;
  padding-bottom: 0.5rem;
}

This produces still not the nicest looking style but it will do until we add our font later:

We will continue this process for the rest of the components within the body:

• About Me
• My Skills
• Portfolio
• Blog

When it comes to the detailed components such as the Project and Post child components we'll add those at the end.

GitHub

To view where we're at you can follow this link to the final commit at the end of each post to follow along!