25aa04e2e7
* chore(curriculum): accessibility-quiz * chore(curriculum): cafe-menu * chore(curriculum): ferris-wheel * chore(curriculum): fix ferris-wheel tests * chore(curriculum): colored-markers * chore(curriculum): photo-gallery * chore(curriculum): magazine * chore(curriculum): penguin * chore(curriculum): city-skyline * chore(curriculum): registration-form * chore(curriculum): picasso-painting * chore(curriculum): balance-sheet * chore(curriculum): piano * chore(curriculum): rothko-painting * fix: title min 15 chars
110 lines
2.9 KiB
Markdown
110 lines
2.9 KiB
Markdown
---
|
|
id: 6143869bb45bd85e3b1926aa
|
|
title: Step 4
|
|
challengeType: 0
|
|
dashedName: 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.
|
|
|
|
```js
|
|
assert.exists(document.querySelector('header'));
|
|
```
|
|
|
|
Your `header` element should be within your `.heading` element.
|
|
|
|
```js
|
|
assert(document.querySelector('header')?.parentElement?.className === 'heading');
|
|
```
|
|
|
|
Your `header` element should have the `class` set to `hero`.
|
|
|
|
```js
|
|
assert(document.querySelector('header')?.className === 'hero');
|
|
```
|
|
|
|
You should create an `img` element.
|
|
|
|
```js
|
|
assert.exists(document.querySelector('img'));
|
|
```
|
|
|
|
Your `img` element should be within your `header` element.
|
|
|
|
```js
|
|
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`.
|
|
|
|
```js
|
|
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`.
|
|
|
|
```js
|
|
assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo');
|
|
```
|
|
|
|
Your `img` element should have the `loading` attribute set to `lazy`.
|
|
|
|
```js
|
|
assert(document.querySelector('img')?.getAttribute('loading') === 'lazy');
|
|
```
|
|
|
|
Your `img` element should have the `class` set to `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
|
|
|
|
```
|