---
id: 6143869bb45bd85e3b1926aa
title: Hatua ya 4
challengeType: 0
dashedName: step-4
---

# --description--

Ndani ya kipengele chako cha `.heading`, unda kipengele cha `header` chenye `class` ya `hero`.

Katika kipengele hicho, unda kipengele cha `img` chenye `src` iliyowekwa kuwa `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`, `alt` iliyowekwa kuwa `freecodecamp logo`, na `class` iliyowekwa kuwa `hero-img`.

Sifa ya `loading` kwenye kipengele cha `img` inaweza kuwekwa kuwa `lazy` kuiaambia kivinjari kisilete rasilimali ya picha hadi itakapohitajika (kama ilivyo, wakati mtumiaji anasogeza picha kwenye mwonekano). Kama faida ya ziada, vipengee vilivyopakiwa kwa uvivu havitapakia hadi vipengee visivyo na uvivu vipakiwe - hii inamaanisha kuwa watumiaji walio na miunganisho ya polepole ya mtandao wanaweza kutazama maudhui ya ukurasa wako bila kusubiri hadi picha zipakie.

Kipe kipengele chako kipya cha `img` sifa ya `loading` iliyowekwa kuwa `lazy`.

# --hints--

Unapaswa kuongeza kipengele cha `header`.

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

Kipengele chako cha `header` kinapaswa kuwa ndani ya kipengele chako cha `.heading`.

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

Kipengee chako cha `header` kinapaswa kuwa na `class` ya `hero`.

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

Unapaswa kuongeza kipengele cha `img`.

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

Kipengele chako cha `img` kinapaswa kuwa ndani ya kipengele chako cha `header`.

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

Kipengee chako cha `img` kinapaswa kuwa na `src` iliyowekwa kuwa `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');
```

Kipengee chako cha `img` kinapaswa kuwa na `alt` iliyowekwa kuwa `freecodecamp logo`.

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

Kipengele chako cha tatu cha `img` kinapaswa kuwa na sifa ya `loading` iliyowekwa kuwa `lazy`.

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

Kipengee chako kipya cha `img` kinapaswa kuwa na `class` ya `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

```
