---
id: 6143869bb45bd85e3b1926aa
title: Paso 4
challengeType: 0
dashedName: step-4
---

# --description--

Dentro de su elemento `.heading`, cree un elemento `header` con la `class` establecida en `hero`.

En ese elemento, cree un elemento `img` con el `src` establecido en `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`, el `alt` establecido en `freecodecamp logo` y el `class` establecido en `hero-img`.

El atributo `loading` de un elemento `img` puede establecerse como `lazy` para indicar al navegador que no recupere el recurso de la imagen hasta que sea necesario (por ejemplo, cuando el usuario se desplace para ver la imagen). Como beneficio adicional, los elementos de carga lenta no se cargarán hasta que los elementos no lentos se carguen - esto significa que los usuarios con conexiones de Internet lentas pueden ver el contenido de su página sin tener que esperar a que las imágenes se carguen.

Dale a tu nuevo elemento `img` un atributo `loading` establecido en `lazy`.

# --hints--

Debes crear un elemento `header`.

```js
assert.exists(document.querySelector('header'));
```

Tu elemento `header` debe estar dentro de tu elemento `.heading`.

```js
assert(document.querySelector('header')?.parentElement?.className === 'heading');
```

Tu elemento `header` debe tener la `class` establecida en `hero`.

```js
assert(document.querySelector('header')?.className === 'hero');
```

Debe crear un elemento `img`.

```js
assert.exists(document.querySelector('img'));
```

El elemento `img` debe estar dentro del elemento `header`.

```js
assert(document.querySelector('img')?.parentElement?.localName === 'header');
```

El elemento `img` debe tener el `src` establecido en `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');
```

El elemento `img` debe tener el `alt` establecido en `freecodecamp logo`.

```js
assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo');
```

El elemento `img` debe tener el atributo `loading` establecido en `lazy`.

```js
assert(document.querySelector('img')?.getAttribute('loading') === 'lazy');
```

El elemento `img` debe tener el `class` establecido en `hero-img`.

```js
assert(document.querySelector('img')?.className === 'hero-img');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
--fcc-editable-region--
    <main>
      <section class="heading">

      </section>
    </main>
--fcc-editable-region--
  </body>
</html>
```

```css

```
