Files
freeCodeCamp/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
T
Othniel Ojochonu Abalaka 51161b677b fix(UI): Script displayed in preview when using specific css (#56570)
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
2024-11-05 09:35:31 +01:00

1.9 KiB

id, title, challengeType, dashedName, demoType
id title challengeType dashedName demoType
5dc174fcf86c76b9248c6eb2 Step 1 0 step-1 onLoad

--description--

HTML elements have an opening and closing tag with content in between.

Here is the basic syntax:

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

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

assert(code.match(/catphotoapp/i));

Your h1 element should have an opening tag. Opening tags have this syntax: <elementName>.

assert(document.querySelector('h1'));

Your h1 element should have a closing tag. Closing tags have a / just after the < character.

assert(code.match(/<\/h1\>/));

You have more than one h1 element. Remove the extra h1 element.

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.

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.

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>
  <body>
--fcc-editable-region--
    <h1>Hello World</h1>
--fcc-editable-region--
  </body>
</html>