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>
<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|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>