freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-elemen...

1.8 KiB

id title challengeType videoUrl forumTopicId
bad87fee1348bd9aedf0887a Headline with the h2 Element 0 https://scrimba.com/p/pVMPUv/cE8Gqf3 18196

Description

Over the next few lessons, we'll build an HTML5 cat photo web app piece-by-piece. The h2 element you will be adding in this step will add a level two heading to the web page. This element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings. There are also h3, h4, h5 and h6 elements to indicate different levels of subheadings.

Instructions

Add an h2 tag that says "CatPhotoApp" to create a second HTML element below your "Hello World" h1 element.

Tests

tests:
  - text: Create an <code>h2</code> element.
    testString: assert(($("h2").length > 0));
  - text: Make sure your <code>h2</code> element has a closing tag.
    testString: assert(code.match(/<\/h2>/g) && code.match(/<\/h2>/g).length === code.match(/<h2>/g).length);
  - text: Your <code>h2</code> element should have the text "CatPhotoApp".
    testString: assert.isTrue((/cat(\s)?photo(\s)?app/gi).test($("h2").text()));
  - text: Your <code>h1</code> element should have the text "Hello World".
    testString: assert.isTrue((/hello(\s)+world/gi).test($("h1").text()));

Challenge Seed

<h1>Hello World</h1>

Solution

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>