ContextQMD
Back to Freecodecamp

Step 4

curriculum/challenges/english/blocks/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md

latest1.2 KB
Original Source

--description--

Add a header element within the body element and assign a class of header to it.

Inside the header, create an h1 with css flexbox photo gallery as the text.

--hints--

You should have a header element within your body element.

js
assert.exists(document.querySelector('body')?.querySelector('header'));

Your header element should have a class with header as the value.

js
assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));

Your header element should have an h1 element inside it.

js
assert.exists(document.querySelector('.header')?.querySelector('h1'));

Your h1 element should have the text css flexbox photo gallery inside it.

js
assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');

--seed--

--seed-contents--

html
--fcc-editable-region--
<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
  </body>
</html>
--fcc-editable-region--
css