---
id: 6143869bb45bd85e3b1926aa
title: Step 4
challengeType: 0
dashedName: step-4
---
# --description--
Within your `.heading` element, create a `header` element with the `class` set to `hero`.
In that element, create an `img` element with the `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`, the `alt` set to `freecodecamp logo`, and the `class` set to `hero-img`.
The `loading` attribute on an `img` element can be set to `lazy` to tell the browser not to fetch the image resource until it is needed (as in, when the user scrolls the image into view). As an additional benefit, lazy loaded elements will not load until the non-lazy elements are loaded - this means users with slow internet connections can view the content of your page without having to wait for the images to load.
Give your new `img` element a `loading` attribute set to `lazy`.
# --hints--
You should create a `header` element.
```js
assert.exists(document.querySelector('header'));
```
Your `header` element should be within your `.heading` element.
```js
assert(document.querySelector('header')?.parentElement?.className === 'heading');
```
Your `header` element should have the `class` set to `hero`.
```js
assert(document.querySelector('header')?.className === 'hero');
```
You should create an `img` element.
```js
assert.exists(document.querySelector('img'));
```
Your `img` element should be within your `header` element.
```js
assert(document.querySelector('img')?.parentElement?.localName === 'header');
```
Your `img` element should have the `src` set to `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`.
```js
assert(document.querySelector('img')?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png');
```
Your `img` element should have the `alt` set to `freecodecamp logo`.
```js
assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo');
```
Your `img` element should have the `loading` attribute set to `lazy`.
```js
assert(document.querySelector('img')?.getAttribute('loading') === 'lazy');
```
Your `img` element should have the `class` set to `hero-img`.
```js
assert(document.querySelector('img')?.className === 'hero-img');
```
# --seed--
## --seed-contents--
```html
Magazine
--fcc-editable-region--
--fcc-editable-region--
```
```css
```