2021-10-28 12:31:12 -07:00
---
id: 614387cbefeeba5f3654a291
title: Step 7
challengeType: 0
dashedName: step-7
---
# --description--
After your `header` element, create a `div` with the `class` set to `author` .
Within that `div` , create a `p` element with the `class` set to `author-name` and give it the text `By freeCodeCamp` . Wrap the `freeCodeCamp` portion in an `a` element with the `href` set to `https://freecodecamp.org` , and the `target` set to `_blank` .
Below that, add a second `p` element with the class `publish-date` and the text `March 7, 2019` .
# --hints--
You should create a new `div` element.
```js
assert.exists(document.querySelector('div'));
```
Your `div` element should come after your `header` element.
```js
assert(document.querySelector('div')?.previousElementSibling?.localName === 'header');
```
Your `div` element should have the `class` set to `author` .
```js
assert(document.querySelector('div')?.className === 'author');
```
You should create two new `p` elements.
```js
assert(document.querySelectorAll('p')?.length === 3);
```
Your two new `p` elements should be within your `div` element.
```js
assert.exists(document.querySelector('div')?.querySelectorAll('p')?.length === 2);
```
Your first new `p` element should have a `class` set to `author-name` .
```js
assert(document.querySelector('div')?.querySelector('p')?.className === 'author-name');
```
Your first new `p` element should have the text `By freeCodeCamp` .
```js
assert(document.querySelector('div')?.querySelector('p')?.innerText === 'By freeCodeCamp');
```
Your second new `p` element should have a `class` set to `publish-date` .
```js
assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.className === 'publish-date');
```
Your second new `p` element should have the text `March 7, 2019` .
```js
assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.innerText === 'March 7, 2019');
```
You should create a new `a` element.
```js
assert.exists(document.querySelector('a'));
```
Your `a` element should be within your first new `p` element.
```js
assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.localName === 'a');
```
Your `a` element should have the `href` set to `https://freecodecamp.org` .
```js
assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('href') === 'https://freecodecamp.org');
```
Your `a` element should have the `target` set to `_blank` .
```js
assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('target') === '_blank');
```
Your `a` element should surround the text `freeCodeCamp` .
```js
assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.textContent === 'freeCodeCamp');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" / >
2022-03-14 15:54:43 +00:00
< title > Magazine< / title >
2021-10-28 12:31:12 -07:00
< 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 >
< main >
< section class = "heading" >
< header class = "hero" >
< img
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
alt="freecodecamp logo"
loading="lazy"
class="hero-img"
width="400"
/>
< h1 class = "hero-title" > OUR NEW CURRICULUM< / h1 >
< p class = "hero-subtitle" >
Our efforts to restructure our curriculum with a more project-based
focus
< / p >
< / header >
--fcc-editable-region--
< / section >
< / main >
--fcc-editable-region--
< / body >
< / html >
```
```css
```
