cb5244be73
* feat: initial infrastructure * feat: html steps done * feat: through step 50 * feat: complete steps * feat: write tests * chore: apply gikf's review suggestions Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> * chore: use correct alt text Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> * fix: image size Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> * feat: add temporary width * chore: apply sem's review suggestions Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * chore: missed one Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * chore: apply kris' review suggestions Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * chore: no text walls Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> * chore: walls of text * chore: remaining review suggestions * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: linting index.md * chore: lang tags * feat: clarify noreferrer * feat: clarify lazy loading * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: note about justify * fix: split step 7 * fix: hero title * chore: parts are secretly steps * chore: apply tom's review suggestions Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * chore: missed one Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Krzysztof <60067306+gikf@users.noreply.github.com> Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> Co-authored-by: Kristofer Koishigawa <scissorsneedfoodtoo@gmail.com> Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
2.9 KiB
id, title, challengeType, dashedName
| 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>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Grid Magazine</title>
<link
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&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>