freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/basic-html-cat-photo-app/part-10.md

---
id: 5dc24614f86c76b9248c6ebd
title: Part 10
challengeType: 0
isHidden: true
---

## Description
<section id='description'>

You can link to another page with the anchor (`a`) element. For example, <a href="https://www.freecodecamp.org"></a> would link to `freecodecamp.org`. 

Add an anchor element after the paragraph that links to `https://freecatphotoapp.com`. At this point, the link won’t show up in the preview.

</section>

## Tests
<section id='tests'>

```yml
tests:
  - text: "Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: `<elementName>`."
    testString: assert( document.querySelector('a') );
  - text: "Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character."
    testString: assert( code.match(/<\/a\>/) );
  - text: "Your anchor (`a`) element should be below the `p` element. You have them in the wrong order."
    testString: const collection = [...document.querySelectorAll('a, p')].map(node => node.nodeName); assert( collection.indexOf('P') < collection.indexOf('A') );
  - text: Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
    testString: assert( document.querySelector('a').hasAttribute('href') );
  - text: "Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo."
    testString: assert( document.querySelector('a').getAttribute('href') === 'https://freecatphotoapp.com' );
  - text: Although you have set the anchor ('a') element's `href` attribute to the correct link, it is recommended to always surround the value of an attribute with quotation marks.
    testString: assert( !/\<a\s+href\s*=\s*https:\/\/www.freecodecamp.org\/cat-photos/.test(code) );

```

</section>

## Challenge Seed
<section id='challengeSeed'>

<div id='html-seed'>

```html
<html>
  <body>
    <h1>CatPhotoApp</h1>
    <main>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      --fcc-editable-region--
      <p>Click here to view more cat photos.</p>
      --fcc-editable-region--
      <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
    </main>
  </body>
</html>
```

</div>
</section>
-												feat(learn): Update Basic HTML Cat Photo App project descriptions and hints and tests (v7) (#39131)

* feat: added Cat Photo App project

Added new steps

feat: add tests + targetted hints for demo

simplify wording and combine some tests

feat: update text and add tests/hints

fix: changed descriptions and tests

feat: added tests for part 11 - 15

fix: reworded description for steps 2 and 10

fix: changed isBeta to isHidden

fix: temporarily remove fcc-editable strings

fix: added project to challengeTypes.js

fix: added missing parentheses

fix: test text improvements

fix: changes to tests and text discussed in meeting

fix: adjust logic for detecting indentation in part 07

fix: missing regex characters and made last test more permissive for part 04

feat: add steps 25 to 55 and notes

fix: added h1 element back to steps 5-24

fix: h1 and h2 elements from steps 25 to 50

fix: added missing DOCTYPE declaration steps 20-24

fix: miscellaneous text edits

fix: break up part 28, change local paths for images to short s3 cdn URLs

fix: part 01 and 02 descriptions and tests

feat: pull in changes from #39145 and remove solution sections

fix: adjust descriptions and break up steps 33 and 35

fix: break up more steps and adjust text

feat: add tests for parts 25 - 30

* fix: ran reorder-steps.js

* fix: added editable region markers

* fix: standardize opening tag hint text

* fix: remove trailing periods from descriptions and hints and adjust tests

* fix: remove unnecessary instructions sections

* fix: added test to check for only one h1 element

* fix: removed comma

* fix: changed paragraph element to `p` element

* fix: added test for extra h1 element

* fix: test to validate only one img element exists

* fix: replaced code tags with backticks

* fix: reworded description

* fix: reworded step description

* fix: changed tests for first step

* fix: change last two alt values to sentences

* fix: check for spaces in text strings

* fix: removed extra dot before replace method

* fix: moved example before instruction

* fix: rearranged step 6 tests

* fix: capitalized p in paragraph

* fix: rewored step 7's description and a test text

* fix: corrected test for step 8

* fix: improved step 9 tests

* fix: moved example above instruction

* fix: corrected step 9 test wording

* fix: rearrange test order for step 10

* fix: moved example before instructions for step 11

* fix: improved step 12 descripton and tests

* fix: corrected tests for steps 9, 10, 11, 13, 14

* fix: added ERMs to steps 4-14

* fix: minor typos

* fix: reword steps so examples are above instructions

* fix: introduce inline and block elements and use divs instead of br

* fix: add or adjust tests for steps 15 - 27

* fix: moved ERM up one line

* fix: removed unnecessary quotes in tests' text

* fix: added dfn tags for step 45

* fix: removed adding # to href step

* fix: tests 15 - 16

* fix: reword descriptions so they're not as hand holdy

* fix: reorder/reword steps 58 - 60

* feat: simplify radio button steps

* fix: wording and add demo step

* fix: remove doctype and teach in last step

* fix: update part-demo

* fix: added some more step 15 hints

* fix: added step to introduce section elems

* fix: added section elements to project

* fix: update final code

* fix: update tests for 15a and 16

* fix: add section elements to parts 45 to 61

* fix: change p elements to h3, update tests and text

* fix: added new test for step 9

* fix: fixed/added tests for steps 15-30a

* fix: use fieldset elements instead of divs in the form

* fix: added new test to setp 30a

* fix: changed `main` to `section`

* fix: corrected/added tests for step 31

* feat: add tests 32 - 36

* fix: revert change to js rpg game

* fix: simplify tests 32 - 36

* fix: updated submit-cat-form url

fix: changed submit-cat-form url

* fix: added/rearranged tests steps 32-36

* fix: added tests for step 36a

* fix: used hasAttribute where applicable

* fix: misc edits for steps 10 and 35-36a

* fix: add tests to step 37

* fix: reworded step 37

* fix: added more verbiage to steps 35 and 36

* fix: modified step 38 desc and added tests

* fix: added hints/tests for step 40

* fix: added hints/tests for step 41

* fix: added hints/tests for steps 42 and 43

* fix: made attribute values match exactly

* fix: change wording from text input to text field

* fix: rearrange name attribute lessons

* feat: tests for 44 - 44b

* fix: added a step  35a

* fix: added name="catphotourl" to steps 36-61

* fix: reworded steps 41 and 43

* fix: removed intro to for attribute

* fix: rewrite of step 44b's desc and tests

* fix: added step 45 hints/tests

fix

* fix: removed for attribute from steps 45a-61

* fix: removed extra )

* fix: wrapped "section" with backticks

* fix: added test for steps 45a and 45b

* fix: adjust position of label steps 55-61

* fix: removed conole.log statements

* fix: added tests to step 45c

* fix: renamed step 49 to step 46a

* fix: moved label element for steps 48-53

* fix: reworded step 47 description and instructions

* fix: typos in description and test text

* feat: add tests 46-48

* fix: wording

* fix: remove case insensitivity from a couple of tests

* fix: wording and add erms

* fix: add additional test for step 48

* fix: added hints/tests for step 50

* fix: added hints/tests for step 51

* fix: added hints/tests to step 53

* fix: added hints/tests for step 55

* fix: added hints/tests for step 56

* feat: tests for 57-61

* fix: removed duplicate test in step 55

* fix: adjusted 1st test for step 57

* fix: simplified test for title text

* fix: improved tests for step 60-61

* fix: removed demo.md file

* fix: ran reorder-steps.js

* fix: part 10 description

* fix: part 14 description

* fix: part 24 - move ERMs

* fix: part 05 description

* fix: part 54 test text

* fix: part 06 - wording and add test for p and main closing tag order

* fix: part 50 - add test to check for order of fieldset elements

* feat: value attribute for radio buttons step and seed changes

* feat: value attribute for checkboxes step and seed changes

* fix: update part 14 description

* fix: revert ERMs for part 24

* fix: remove last test in part 06

* fix: text and typos for new radio and checkbox lessons

* fix: text and typos for new radio and checkbox lessons

* fix: add test to part 01

* fix: ran reorder-steps.js

Co-authored-by: Kris Koishigawa <scissorsneedfoodtoo@gmail.com>
											
										
										
											2020-07-24 09:13:46 -07:00
+								---
 								id: 5dc24614f86c76b9248c6ebd
 								title: Part 10
 								challengeType: 0
 								isHidden: true
 								---
 								## Description
 								<section id='description'>
 								You can link to another page with the anchor (`a`) element. For example, <a href="https://www.freecodecamp.org"></a> would link to `freecodecamp.org`.
-												fix: corrected freecatphotoapp.com link

											
										
										
											2020-07-24 23:16:42 -07:00
+								Add an anchor element after the paragraph that links to `https://freecatphotoapp.com`. At this point, the link won’t show up in the preview.
-												feat(learn): Update Basic HTML Cat Photo App project descriptions and hints and tests (v7) (#39131)

* feat: added Cat Photo App project

Added new steps

feat: add tests + targetted hints for demo

simplify wording and combine some tests

feat: update text and add tests/hints

fix: changed descriptions and tests

feat: added tests for part 11 - 15

fix: reworded description for steps 2 and 10

fix: changed isBeta to isHidden

fix: temporarily remove fcc-editable strings

fix: added project to challengeTypes.js

fix: added missing parentheses

fix: test text improvements

fix: changes to tests and text discussed in meeting

fix: adjust logic for detecting indentation in part 07

fix: missing regex characters and made last test more permissive for part 04

feat: add steps 25 to 55 and notes

fix: added h1 element back to steps 5-24

fix: h1 and h2 elements from steps 25 to 50

fix: added missing DOCTYPE declaration steps 20-24

fix: miscellaneous text edits

fix: break up part 28, change local paths for images to short s3 cdn URLs

fix: part 01 and 02 descriptions and tests

feat: pull in changes from #39145 and remove solution sections

fix: adjust descriptions and break up steps 33 and 35

fix: break up more steps and adjust text

feat: add tests for parts 25 - 30

* fix: ran reorder-steps.js

* fix: added editable region markers

* fix: standardize opening tag hint text

* fix: remove trailing periods from descriptions and hints and adjust tests

* fix: remove unnecessary instructions sections

* fix: added test to check for only one h1 element

* fix: removed comma

* fix: changed paragraph element to `p` element

* fix: added test for extra h1 element

* fix: test to validate only one img element exists

* fix: replaced code tags with backticks

* fix: reworded description

* fix: reworded step description

* fix: changed tests for first step

* fix: change last two alt values to sentences

* fix: check for spaces in text strings

* fix: removed extra dot before replace method

* fix: moved example before instruction

* fix: rearranged step 6 tests

* fix: capitalized p in paragraph

* fix: rewored step 7's description and a test text

* fix: corrected test for step 8

* fix: improved step 9 tests

* fix: moved example above instruction

* fix: corrected step 9 test wording

* fix: rearrange test order for step 10

* fix: moved example before instructions for step 11

* fix: improved step 12 descripton and tests

* fix: corrected tests for steps 9, 10, 11, 13, 14

* fix: added ERMs to steps 4-14

* fix: minor typos

* fix: reword steps so examples are above instructions

* fix: introduce inline and block elements and use divs instead of br

* fix: add or adjust tests for steps 15 - 27

* fix: moved ERM up one line

* fix: removed unnecessary quotes in tests' text

* fix: added dfn tags for step 45

* fix: removed adding # to href step

* fix: tests 15 - 16

* fix: reword descriptions so they're not as hand holdy

* fix: reorder/reword steps 58 - 60

* feat: simplify radio button steps

* fix: wording and add demo step

* fix: remove doctype and teach in last step

* fix: update part-demo

* fix: added some more step 15 hints

* fix: added step to introduce section elems

* fix: added section elements to project

* fix: update final code

* fix: update tests for 15a and 16

* fix: add section elements to parts 45 to 61

* fix: change p elements to h3, update tests and text

* fix: added new test for step 9

* fix: fixed/added tests for steps 15-30a

* fix: use fieldset elements instead of divs in the form

* fix: added new test to setp 30a

* fix: changed `main` to `section`

* fix: corrected/added tests for step 31

* feat: add tests 32 - 36

* fix: revert change to js rpg game

* fix: simplify tests 32 - 36

* fix: updated submit-cat-form url

fix: changed submit-cat-form url

* fix: added/rearranged tests steps 32-36

* fix: added tests for step 36a

* fix: used hasAttribute where applicable

* fix: misc edits for steps 10 and 35-36a

* fix: add tests to step 37

* fix: reworded step 37

* fix: added more verbiage to steps 35 and 36

* fix: modified step 38 desc and added tests

* fix: added hints/tests for step 40

* fix: added hints/tests for step 41

* fix: added hints/tests for steps 42 and 43

* fix: made attribute values match exactly

* fix: change wording from text input to text field

* fix: rearrange name attribute lessons

* feat: tests for 44 - 44b

* fix: added a step  35a

* fix: added name="catphotourl" to steps 36-61

* fix: reworded steps 41 and 43

* fix: removed intro to for attribute

* fix: rewrite of step 44b's desc and tests

* fix: added step 45 hints/tests

fix

* fix: removed for attribute from steps 45a-61

* fix: removed extra )

* fix: wrapped "section" with backticks

* fix: added test for steps 45a and 45b

* fix: adjust position of label steps 55-61

* fix: removed conole.log statements

* fix: added tests to step 45c

* fix: renamed step 49 to step 46a

* fix: moved label element for steps 48-53

* fix: reworded step 47 description and instructions

* fix: typos in description and test text

* feat: add tests 46-48

* fix: wording

* fix: remove case insensitivity from a couple of tests

* fix: wording and add erms

* fix: add additional test for step 48

* fix: added hints/tests for step 50

* fix: added hints/tests for step 51

* fix: added hints/tests to step 53

* fix: added hints/tests for step 55

* fix: added hints/tests for step 56

* feat: tests for 57-61

* fix: removed duplicate test in step 55

* fix: adjusted 1st test for step 57

* fix: simplified test for title text

* fix: improved tests for step 60-61

* fix: removed demo.md file

* fix: ran reorder-steps.js

* fix: part 10 description

* fix: part 14 description

* fix: part 24 - move ERMs

* fix: part 05 description

* fix: part 54 test text

* fix: part 06 - wording and add test for p and main closing tag order

* fix: part 50 - add test to check for order of fieldset elements

* feat: value attribute for radio buttons step and seed changes

* feat: value attribute for checkboxes step and seed changes

* fix: update part 14 description

* fix: revert ERMs for part 24

* fix: remove last test in part 06

* fix: text and typos for new radio and checkbox lessons

* fix: text and typos for new radio and checkbox lessons

* fix: add test to part 01

* fix: ran reorder-steps.js

Co-authored-by: Kris Koishigawa <scissorsneedfoodtoo@gmail.com>
											
										
										
											2020-07-24 09:13:46 -07:00
 								</section>
 								## Tests
 								<section id='tests'>
 								```yml
 								tests:
 								  - text: "Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: `<elementName>`."
 								    testString: assert( document.querySelector('a') );
 								  - text: "Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character."
 								    testString: assert( code.match(/<\/a\>/) );
 								  - text: "Your anchor (`a`) element should be below the `p` element. You have them in the wrong order."
 								    testString: const collection = [...document.querySelectorAll('a, p')].map(node => node.nodeName); assert( collection.indexOf('P') < collection.indexOf('A') );
 								  - text: Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
 								    testString: assert( document.querySelector('a').hasAttribute('href') );
-												fix: corrected freecatphotoapp.com link

											
										
										
											2020-07-24 23:16:42 -07:00
+								  - text: "Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo."
 								    testString: assert( document.querySelector('a').getAttribute('href') === 'https://freecatphotoapp.com' );
-												feat(learn): Update Basic HTML Cat Photo App project descriptions and hints and tests (v7) (#39131)

* feat: added Cat Photo App project

Added new steps

feat: add tests + targetted hints for demo

simplify wording and combine some tests

feat: update text and add tests/hints

fix: changed descriptions and tests

feat: added tests for part 11 - 15

fix: reworded description for steps 2 and 10

fix: changed isBeta to isHidden

fix: temporarily remove fcc-editable strings

fix: added project to challengeTypes.js

fix: added missing parentheses

fix: test text improvements

fix: changes to tests and text discussed in meeting

fix: adjust logic for detecting indentation in part 07

fix: missing regex characters and made last test more permissive for part 04

feat: add steps 25 to 55 and notes

fix: added h1 element back to steps 5-24

fix: h1 and h2 elements from steps 25 to 50

fix: added missing DOCTYPE declaration steps 20-24

fix: miscellaneous text edits

fix: break up part 28, change local paths for images to short s3 cdn URLs

fix: part 01 and 02 descriptions and tests

feat: pull in changes from #39145 and remove solution sections

fix: adjust descriptions and break up steps 33 and 35

fix: break up more steps and adjust text

feat: add tests for parts 25 - 30

* fix: ran reorder-steps.js

* fix: added editable region markers

* fix: standardize opening tag hint text

* fix: remove trailing periods from descriptions and hints and adjust tests

* fix: remove unnecessary instructions sections

* fix: added test to check for only one h1 element

* fix: removed comma

* fix: changed paragraph element to `p` element

* fix: added test for extra h1 element

* fix: test to validate only one img element exists

* fix: replaced code tags with backticks

* fix: reworded description

* fix: reworded step description

* fix: changed tests for first step

* fix: change last two alt values to sentences

* fix: check for spaces in text strings

* fix: removed extra dot before replace method

* fix: moved example before instruction

* fix: rearranged step 6 tests

* fix: capitalized p in paragraph

* fix: rewored step 7's description and a test text

* fix: corrected test for step 8

* fix: improved step 9 tests

* fix: moved example above instruction

* fix: corrected step 9 test wording

* fix: rearrange test order for step 10

* fix: moved example before instructions for step 11

* fix: improved step 12 descripton and tests

* fix: corrected tests for steps 9, 10, 11, 13, 14

* fix: added ERMs to steps 4-14

* fix: minor typos

* fix: reword steps so examples are above instructions

* fix: introduce inline and block elements and use divs instead of br

* fix: add or adjust tests for steps 15 - 27

* fix: moved ERM up one line

* fix: removed unnecessary quotes in tests' text

* fix: added dfn tags for step 45

* fix: removed adding # to href step

* fix: tests 15 - 16

* fix: reword descriptions so they're not as hand holdy

* fix: reorder/reword steps 58 - 60

* feat: simplify radio button steps

* fix: wording and add demo step

* fix: remove doctype and teach in last step

* fix: update part-demo

* fix: added some more step 15 hints

* fix: added step to introduce section elems

* fix: added section elements to project

* fix: update final code

* fix: update tests for 15a and 16

* fix: add section elements to parts 45 to 61

* fix: change p elements to h3, update tests and text

* fix: added new test for step 9

* fix: fixed/added tests for steps 15-30a

* fix: use fieldset elements instead of divs in the form

* fix: added new test to setp 30a

* fix: changed `main` to `section`

* fix: corrected/added tests for step 31

* feat: add tests 32 - 36

* fix: revert change to js rpg game

* fix: simplify tests 32 - 36

* fix: updated submit-cat-form url

fix: changed submit-cat-form url

* fix: added/rearranged tests steps 32-36

* fix: added tests for step 36a

* fix: used hasAttribute where applicable

* fix: misc edits for steps 10 and 35-36a

* fix: add tests to step 37

* fix: reworded step 37

* fix: added more verbiage to steps 35 and 36

* fix: modified step 38 desc and added tests

* fix: added hints/tests for step 40

* fix: added hints/tests for step 41

* fix: added hints/tests for steps 42 and 43

* fix: made attribute values match exactly

* fix: change wording from text input to text field

* fix: rearrange name attribute lessons

* feat: tests for 44 - 44b

* fix: added a step  35a

* fix: added name="catphotourl" to steps 36-61

* fix: reworded steps 41 and 43

* fix: removed intro to for attribute

* fix: rewrite of step 44b's desc and tests

* fix: added step 45 hints/tests

fix

* fix: removed for attribute from steps 45a-61

* fix: removed extra )

* fix: wrapped "section" with backticks

* fix: added test for steps 45a and 45b

* fix: adjust position of label steps 55-61

* fix: removed conole.log statements

* fix: added tests to step 45c

* fix: renamed step 49 to step 46a

* fix: moved label element for steps 48-53

* fix: reworded step 47 description and instructions

* fix: typos in description and test text

* feat: add tests 46-48

* fix: wording

* fix: remove case insensitivity from a couple of tests

* fix: wording and add erms

* fix: add additional test for step 48

* fix: added hints/tests for step 50

* fix: added hints/tests for step 51

* fix: added hints/tests to step 53

* fix: added hints/tests for step 55

* fix: added hints/tests for step 56

* feat: tests for 57-61

* fix: removed duplicate test in step 55

* fix: adjusted 1st test for step 57

* fix: simplified test for title text

* fix: improved tests for step 60-61

* fix: removed demo.md file

* fix: ran reorder-steps.js

* fix: part 10 description

* fix: part 14 description

* fix: part 24 - move ERMs

* fix: part 05 description

* fix: part 54 test text

* fix: part 06 - wording and add test for p and main closing tag order

* fix: part 50 - add test to check for order of fieldset elements

* feat: value attribute for radio buttons step and seed changes

* feat: value attribute for checkboxes step and seed changes

* fix: update part 14 description

* fix: revert ERMs for part 24

* fix: remove last test in part 06

* fix: text and typos for new radio and checkbox lessons

* fix: text and typos for new radio and checkbox lessons

* fix: add test to part 01

* fix: ran reorder-steps.js

Co-authored-by: Kris Koishigawa <scissorsneedfoodtoo@gmail.com>
											
										
										
											2020-07-24 09:13:46 -07:00
+								  - text: Although you have set the anchor ('a') element's `href` attribute to the correct link, it is recommended to always surround the value of an attribute with quotation marks.
 								    testString: assert( !/\<a\s+href\s*=\s*https:\/\/www.freecodecamp.org\/cat-photos/.test(code) );
 								```
 								</section>
 								## Challenge Seed
 								<section id='challengeSeed'>
 								<div id='html-seed'>
 								```html
 								<html>
 								  <body>
 								    <h1>CatPhotoApp</h1>
 								    <main>
 								      <h2>Cat Photos</h2>
 								      <!-- TODO: Add link to cat photos -->
 								      --fcc-editable-region--
 								      <p>Click here to view more cat photos.</p>
 								      --fcc-editable-region--
 								      <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
 								    </main>
 								  </body>
 								</html>
 								```
 								</div>
 								</section>