mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
Othniel Ojochonu Abalaka
51161b677b
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
84 lines
1.9 KiB
Markdown
84 lines
1.9 KiB
Markdown
---
|
|
id: 5dc174fcf86c76b9248c6eb2
|
|
title: Step 1
|
|
challengeType: 0
|
|
dashedName: step-1
|
|
demoType: onLoad
|
|
---
|
|
|
|
# --description--
|
|
|
|
HTML elements have an opening and closing tag with content in between.
|
|
|
|
Here is the basic syntax:
|
|
|
|
```html
|
|
<openingTag>content</closingTag>
|
|
```
|
|
|
|
The first element you will learn about is the `h1` element. The `h1` element is a heading element and is used for the main heading of a webpage.
|
|
|
|
```html
|
|
<h1>This is a main heading</h1>
|
|
```
|
|
|
|
Change the text of the `h1` element below from `Hello World` to `CatPhotoApp` and watch
|
|
the change in the browser preview.
|
|
|
|
When you are done, press the "Check Your Code" button to see if it's correct.
|
|
|
|
# --hints--
|
|
|
|
The text `CatPhotoApp` should be present in the code. You may want to check your spelling.
|
|
|
|
```js
|
|
assert(code.match(/catphotoapp/i));
|
|
```
|
|
|
|
Your `h1` element should have an opening tag. Opening tags have this syntax: `<elementName>`.
|
|
|
|
```js
|
|
assert(document.querySelector('h1'));
|
|
```
|
|
|
|
Your `h1` element should have a closing tag. Closing tags have a `/` just after the `<` character.
|
|
|
|
```js
|
|
assert(code.match(/<\/h1\>/));
|
|
```
|
|
|
|
You have more than one `h1` element. Remove the extra `h1` element.
|
|
|
|
```js
|
|
assert(document.querySelectorAll('h1').length === 1);
|
|
```
|
|
|
|
Your `h1` element's text should be `CatPhotoApp`. You have either omitted the text, have a typo, or it is not between the `h1` element's opening and closing tags.
|
|
|
|
```js
|
|
assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');
|
|
```
|
|
|
|
You appear to be using a browser extension that is modifying the page. Be sure to turn off all browser extensions.
|
|
|
|
```js
|
|
assert.isAtMost(document.querySelectorAll('script').length, 2);
|
|
assert.equal(document.querySelectorAll('style').length, 1);
|
|
assert.equal(document.querySelectorAll('link').length, 0);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<html>
|
|
<body>
|
|
--fcc-editable-region--
|
|
<h1>Hello World</h1>
|
|
--fcc-editable-region--
|
|
</body>
|
|
</html>
|
|
```
|
|
|