3.1 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 6143869bb45bd85e3b1926aa | Step 4 | 0 | step-4 |
--description--
All'interno dell'elemento .heading, crea un elemento header con l'attributo class impostato su hero.
Al suo interno, crea un elemento img con un src di https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png, alt impostato su freecodecamp logo e class impostato su hero-img.
L'attributo loading per un elemento img può essere impostato su lazy per indicare al browser di non recuperare la risorsa immagine finché non è necessaria (ad esempio, quando l'utente scorre la pagina fino all'immagine). Come ulteriore vantaggio, gli elementi lazy non verranno caricati finché non saranno caricati gli elementi non lazy - questo significa che gli utenti con connessioni internet lente possono visualizzare il contenuto della tua pagina senza dover aspettare che le immagini vengano caricate.
Dai all'elemento img l'attributo loading con il valore lazy.
--hints--
Dovresti creare un elemento header.
assert.exists(document.querySelector('header'));
L'elemento header dovrebbero essere all'interno dell'elemento .heading.
assert(document.querySelector('header')?.parentElement?.className === 'heading');
L'elemento header dovrebbe avere l'attributo class impostato su hero.
assert(document.querySelector('header')?.className === 'hero');
Dovresti creare un elemento img.
assert.exists(document.querySelector('img'));
L'elemento img dovrebbe essere all'interno dell'elemento header.
assert(document.querySelector('img')?.parentElement?.localName === 'header');
L'elemento img dovrebbe avere un src impostato su 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');
L'elemento img dovrebbe avere l'attributo alt impostato su freecodecamp logo.
assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo');
L'elemento img dovrebbe avere un attributo loading impostato su lazy.
assert(document.querySelector('img')?.getAttribute('loading') === 'lazy');
L'elemento img dovrebbe avere l'attributo class impostato su 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>