2.9 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6143869bb45bd85e3b1926aa | Step 4 | 0 | 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.
assert.exists(document.querySelector('header'));
Your header element should be within your .heading element.
assert(document.querySelector('header')?.parentElement?.className === 'heading');
Your header element should have the class set to hero.
assert(document.querySelector('header')?.className === 'hero');
You should create an img element.
assert.exists(document.querySelector('img'));
Your img element should be within your header element.
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.
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.
assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo');
Your img element should have the loading attribute set to lazy.
assert(document.querySelector('img')?.getAttribute('loading') === 'lazy');
Your img element should have the class set to hero-img.
assert(document.querySelector('img')?.className === 'hero-img');
--seed--
--seed-contents--
<!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>