110 lines
3.1 KiB
Markdown
110 lines
3.1 KiB
Markdown
|
---
|
||
|
|
id: 6143869bb45bd85e3b1926aa
|
||
|
|
title: Step 4
|
||
|
|
challengeType: 0
|
||
|
|
dashedName: 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`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert.exists(document.querySelector('header'));
|
||
|
|
```
|
||
|
|
|
||
|
|
L'elemento `header` dovrebbero essere all'interno dell'elemento `.heading`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(document.querySelector('header')?.parentElement?.className === 'heading');
|
||
|
|
```
|
||
|
|
|
||
|
|
L'elemento `header` dovrebbe avere l'attributo `class` impostato su `hero`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(document.querySelector('header')?.className === 'hero');
|
||
|
|
```
|
||
|
|
|
||
|
|
Dovresti creare un elemento `img`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert.exists(document.querySelector('img'));
|
||
|
|
```
|
||
|
|
|
||
|
|
L'elemento `img` dovrebbe essere all'interno dell'elemento `header`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
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`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
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`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo');
|
||
|
|
```
|
||
|
|
|
||
|
|
L'elemento `img` dovrebbe avere un attributo `loading` impostato su `lazy`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(document.querySelector('img')?.getAttribute('loading') === 'lazy');
|
||
|
|
```
|
||
|
|
|
||
|
|
L'elemento `img` dovrebbe avere l'attributo `class` impostato su `hero-img`.
|
||
|
|
|
||
|
|
```js
|
||
|
|
assert(document.querySelector('img')?.className === 'hero-img');
|
||
|
|
```
|
||
|
|
|
||
|
|
# --seed--
|
||
|
|
|
||
|
|
## --seed-contents--
|
||
|
|
|
||
|
|
```html
|
||
|
|
<!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>
|
||
|
|
```
|
||
|
|
|
||
|
|
```css
|
||
|
|
|
||
|
|
```
|