Failed:None of your header elements should be empty Error

Hey Guys,

I’m working on the “Build a Technical Documentation Page” project and I can’t get past this error.

" None of your header elements should be empty."

I don’t think any of my headers are empty and I don’t think they’re hidden in CSS either.

Anybody got any ideas ?

Codepen:

Thanks!

The test is a bit silly, it is only looking for innerText and not elements. Your top-header element only has elements inside it. You can make it pass by giving it some text content.

https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md

const els = document.querySelectorAll('header')
els.forEach(el => {
  if (el.innerText?.length <= 0) assert(false)
})
assert(els.length > 0)

So the header not having any text counts as it being empty.


Issue

1 Like

One small thing, the meta elements should not be inside the title elements.

<title>Cascading Style Sheets Technical Documentation
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </title>

There’s also a few more syntax mistakes if you run the html though this validator you may want to fix.

1 Like

Thanks EllaGriff!

I’ve removed them now and i’ll check out that validator afterwards.

1 Like

Legend!

You’re correct. That fixed it

image
Done