From 17eb7301bd1519a507799947fb89331714559eb2 Mon Sep 17 00:00:00 2001
From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Date: Fri, 26 Apr 2024 10:33:16 -0700
Subject: [PATCH] fix(curriculum): inconsistencies for code examples in cat
 photo app  (#54526)

Co-authored-by: Naomi <nhcarrigan@gmail.com>
---
 .../5dc174fcf86c76b9248c6eb2.md                    | 14 +++++++++++++-
 .../5dc1798ff86c76b9248c6eb3.md                    | 13 ++++++++++++-
 .../5dc17dc8f86c76b9248c6eb5.md                    |  8 +++++++-
 .../5dc2385ff86c76b9248c6eb7.md                    |  9 +++++++++
 .../5dc23991f86c76b9248c6eb8.md                    |  9 +++++++++
 .../5dc24165f86c76b9248c6ebc.md                    |  8 +++++++-
 .../5dc24614f86c76b9248c6ebd.md                    |  8 +++++++-
 .../5ddbd81294d8ddc1510a8e56.md                    |  8 +++++++-
 .../5dfa22d1b521be39a3de7be0.md                    |  2 +-
 .../5dfa2407b521be39a3de7be1.md                    | 10 ++++++++++
 .../5dfa30b9eacea3f48c6300ad.md                    |  8 ++++++++
 .../5dfa37b9eacea3f48c6300b0.md                    |  2 ++
 .../5dfb5ecbeacea3f48c6300b1.md                    |  4 +++-
 .../5dfb6a35eacea3f48c6300b4.md                    | 11 ++++++++++-
 .../5ef9b03c81a63668521804d0.md                    |  2 ++
 .../5ef9b03c81a63668521804d6.md                    |  2 ++
 .../5ef9b03c81a63668521804d7.md                    | 10 +++++++++-
 .../5ef9b03c81a63668521804d9.md                    |  8 +++++++-
 .../5ef9b03c81a63668521804da.md                    |  2 +-
 .../5ef9b03c81a63668521804dc.md                    |  8 +++++++-
 .../5ef9b03c81a63668521804dd.md                    | 10 +++++++++-
 .../5ef9b03c81a63668521804de.md                    |  7 +++++++
 .../5ef9b03c81a63668521804df.md                    |  6 ++++++
 .../5ef9b03c81a63668521804e2.md                    |  2 +-
 .../5ef9b03c81a63668521804e5.md                    | 10 +++++++++-
 .../5ef9b03c81a63668521804e7.md                    |  2 +-
 .../5ef9b03c81a63668521804ea.md                    |  2 ++
 .../5ef9b03c81a63668521804ec.md                    |  4 +++-
 .../5ef9b03c81a63668521804ee.md                    |  2 ++
 .../5efc4f528d6a74d05e68af74.md                    |  7 +++++++
 .../5f07be6ef7412fbad0c5626b.md                    |  9 +++++++++
 .../62bb4009e3458a128ff57d5d.md                    |  2 ++
 .../7cf9b03d81a65668421804c3.md                    |  8 +++++++-
 33 files changed, 198 insertions(+), 19 deletions(-)

diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
index a6b5c0dcbcf..1d313ae2892 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
@@ -7,7 +7,19 @@ dashedName: step-1
 
 # --description--
 
-HTML elements have opening tags like `<h1>` and closing tags like `</h1>`. The text an element will display goes between its opening and closing tags.
+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.
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md
index b121a5feca6..6481ebe0b34 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md
@@ -7,7 +7,18 @@ dashedName: step-2
 
 # --description--
 
-The `h1` through `h6` heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so `h2` elements have less importance than `h1` elements. Only use one `h1` element per page and place lower importance headings below higher importance headings.
+The `h1` through `h6` heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so `h2` elements have less importance than `h1` elements. 
+
+```html
+<h1>most important heading element</h1>
+<h2>second most important heading element</h2>
+<h3>third most important heading element</h3>
+<h4>fourth most important heading element</h4>
+<h5>fifth most important heading element</h5>
+<h6>least important heading element</h6>
+```
+
+Only use one `h1` element per page and place lower importance headings below higher importance headings.
 
 Below the `h1` element, add an `h2` element with this text:
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
index 303e1ec4147..f92eeab3cb4 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
@@ -7,7 +7,13 @@ dashedName: step-4
 
 # --description--
 
-Commenting allows you to leave messages without affecting the browser display. It also allows you to make code inactive. A comment in HTML starts with `<!--`, contains any number of lines of text, and ends with `-->`. For example, the comment `<!-- TODO: Remove h1 -->` contains the text `TODO: Remove h1`.
+Commenting allows you to leave messages without affecting the browser display. It also allows you to make code inactive. A comment in HTML starts with `<!--`, contains any number of lines of text, and ends with `-->`. 
+
+Here is an example of a comment with the `TODO: Remove h1`:
+
+```html
+<!-- TODO: Remove h1 -->
+```
 
 Add a comment above the `p` element with this text:
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index 3904cebdf21..6025e8f9eaf 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -9,6 +9,15 @@ dashedName: step-5
 
 HTML5 has some elements that identify different content areas. These elements make your HTML easier to read and help with Search Engine Optimization (SEO) and accessibility.
 
+The `main` element is used to represent the main content of the body of an HTML document. Content inside the `main` element should be unique to the document and should not be repeated in other parts of the document.
+
+```html
+<main>
+  <h1>Most important content of the document</h1>
+  <p>Some more important content...</p>
+</main>
+```
+
 Identify the main section of this page by adding a `<main>` opening tag before the `h1` element, and a `</main>` closing tag after the `p` element.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 823f4fae2fb..1f6f7925b49 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -9,6 +9,15 @@ dashedName: step-6
 
 In the previous step, you put the `h1`, `h2`, comment, and `p` elements inside the `main` element. This is called *nesting*. Nested elements should be placed two spaces further to the right of the element they are nested in. This spacing is called indentation and it is used to make HTML easier to read.
 
+Here is an example of nesting and indentation:
+
+```html
+<main>
+  <h1>Most important content of the document</h1>
+  <p>Some more important content...</p>
+</main>
+```
+
 The `h1` element, `h2` element and the comment are indented two spaces more than the `main` element in the code below. Use the space bar on your keyboard to add two more spaces in front of the `p` element so that it is indented properly as well.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
index 36f1648e09b..fa3d1706989 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
@@ -7,7 +7,13 @@ dashedName: step-9
 
 # --description--
 
-All `img` elements should have an `alt` attribute. The `alt` attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load. For example, `<img src="cat.jpg" alt="A cat">` has an `alt` attribute with the text `A cat`.
+All `img` elements should have an `alt` attribute. The `alt` attribute's text is used for screen readers to improve accessibility and is displayed if the image fails to load. 
+
+Here is an example of an `img` element with an `alt` attribute:
+
+```html
+<img src="cat.jpg" alt="A cat">
+```
 
 Inside the `img` element, add an `alt` attribute with this text:
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
index fb3a5f107ff..8a4743a1801 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -7,7 +7,13 @@ dashedName: step-10
 
 # --description--
 
-You can link to another page with the anchor (`a`) element. For example, `<a href='https://freecodecamp.org'></a>` would link to `freecodecamp.org`.
+You can link to another page with the anchor (`a`) element. 
+
+Here is an example linking to `https://www.freecodecamp.org`:
+
+```html
+<a href="https://www.freecodecamp.org"></a>
+```
 
 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.
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index 7018871ed0b..899253f5331 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -7,7 +7,13 @@ dashedName: step-11
 
 # --description--
 
-A link's text must be placed between the opening and closing tags of an anchor (`a`) element. For example, `<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>` is a link with the text `click here to go to freeCodeCamp.org`.
+A link's text must be placed between the opening and closing tags of an anchor (`a`) element.
+
+Here is an example of a link with the text `click here to go to freeCodeCamp.org`:
+
+```html
+<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
+```
 
 Add the anchor text `link to cat pictures` to the anchor element. This will become the link's text.
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index de8cbc35287..913170f5439 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -68,8 +68,8 @@ assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i
       <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
       <p>See more cat photos in our gallery.</p>
-      <a href="https://freecatphotoapp.com">link to cat pictures</a>
 --fcc-editable-region--
+      <a href="https://freecatphotoapp.com">link to cat pictures</a>
       <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
     </main>
   </body>
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
index c9922875209..462d185904c 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
@@ -7,6 +7,16 @@ dashedName: step-14
 
 # --description--
 
+To open links in a new tab, you can use the `target` attribute on the anchor (`a`) element. 
+
+The `target` attribute specifies where to open the linked document. `target="_blank"` opens the linked document in a new tab or window.
+
+Here is the basic syntax for an `a` element with a `target` attribute:
+
+```html
+<a href="https://www.freecodecamp.org" target="_blank">freeCodeCamp</a>
+```
+
 Add a `target` attribute with the value `_blank` to the anchor (`a`) element's opening tag, so that the link opens in a new tab.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
index 0994125b0d9..312dd07e0f9 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -9,6 +9,14 @@ dashedName: step-15
 
 In previous steps you used an anchor element to turn text into a link. Other types of content can also be turned into a link by wrapping it in anchor tags. 
 
+Here is an example of turning an image into a link:
+
+```html
+<a href="example-link">
+  <img src="image-link.jpg" alt="A photo of a cat.">
+</a>
+```
+
 Turn the image into a link by surrounding it with necessary element tags. Use `https://freecatphotoapp.com` as the anchor's `href` attribute value.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
index a3cd59fe5df..0b6a34dc4db 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -7,6 +7,8 @@ dashedName: step-20
 
 # --description--
 
+To create an unordered list of items, you can use the `ul` element. 
+
 After the `h3` element with the `Things cats love:` text, add an unordered list (`ul`) element. Note that nothing will be displayed at this point.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
index 1efd3dbed3c..21c2d930d17 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
@@ -7,7 +7,9 @@ dashedName: step-21
 
 # --description--
 
-Use list item (`li`) elements to create items in a list. Here is an example of list items in an unordered list:
+The `li` element is used to create a list item in an ordered or unordered list.
+
+Here is an example of list items in an unordered list:
 
 ```html
 <ul>
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
index 9abc1c6c80d..34c94f53d3f 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -7,7 +7,16 @@ dashedName: step-24
 
 # --description--
 
-A figure caption (`figcaption`) element is used to add a caption to describe the image contained within the `figure` element. For example, `<figcaption>A cute cat</figcaption>` adds the caption `A cute cat`.
+A figure caption (`figcaption`) element is used to add a caption to describe the image contained within the `figure` element. 
+
+Here is an example of a `figcaption` element with the caption of `A cute cat`:
+
+```html
+<figure>
+  <img src="image.jpg" alt="A description of the image">
+  <figcaption>A cute cat</figcaption>
+</figure>
+```
 
 After the image nested in the `figure` element, add a `figcaption` element with text set to:
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
index 8589b0930dc..ed02dbc5104 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -7,6 +7,8 @@ dashedName: step-25
 
 # --description--
 
+To place emphasis on a specific word or phrase, you can use the `em` element. 
+
 Emphasize the word `love` in the `figcaption` element by wrapping it in an emphasis `em` element.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
index 0c3c70cec18..1273aba2741 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -9,6 +9,8 @@ dashedName: step-35
 
 Now you will add a web form to collect information from users.
 
+The `form` element is used to get information from a user like their name, email, and other details. 
+
 After the `Cat Form` heading, add a `form` element.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
index 5a203646eef..6a8f55c2659 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
@@ -7,7 +7,15 @@ dashedName: step-36
 
 # --description--
 
-The `action` attribute indicates where form data should be sent. For example, `<form action="/submit-url"></form>` tells the browser that the form data should be sent to the path `/submit-url`.
+The `action` attribute indicates where form data should be sent. 
+
+Here is an example of a `form` element with an `action` attribute:
+
+```html
+<form action="/submit-url"></form>
+```
+
+In the example, `action="/submit-url"` tells the browser that the form data should be sent to the path `/submit-url`.
 
 Add an `action` attribute with the value `https://freecatphotoapp.com/submit-cat-photo` to the `form` element.
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
index 7124c63026d..1c78d078a5d 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
@@ -7,7 +7,13 @@ dashedName: step-40
 
 # --description--
 
-Placeholder text is used to give people a hint about what kind of information to enter into an input. For example, `<input type="text" placeholder="Email address">`.
+Placeholder text is used to give people a hint about what kind of information to enter into an input. 
+
+Here is an example of an `input` element with a placeholder set to `Ex. Jane Doe`:
+
+```html
+<input type="text" placeholder="Ex. Jane Doe">
+```
 
 Add the placeholder text `cat photo URL` to your `input` element.
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
index 4ed21e7144a..029f4e23543 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -7,7 +7,7 @@ dashedName: step-42
 
 # --description--
 
-Use the `button` element to create a clickable button. For example, `<button>Click Here</button>` creates a button with the text `Click Here`.
+The `button` element is used to create a clickable button.
 
 Add a `button` element with the text `Submit` below the `input` element. The default behavior of clicking a form button without any attributes submits the form to the location specified in the form's `action` attribute.
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
index c8889ee04d4..744ce0d628e 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -9,7 +9,13 @@ dashedName: step-44
 
 You can use radio buttons for questions where you want only one answer out of multiple options.
 
-Here is an example of a radio button with the option of `cat`: `<input type="radio"> cat`. Remember that `input` elements are <dfn>self-closing</dfn>.
+Here is an example of a radio button with the option of `cat`:
+
+```html
+<input type="radio"> cat
+```
+
+Remember that `input` elements are <dfn>self-closing</dfn>.
 
 Before the text input, add a radio button with the option set as:
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
index e4bd4b99e61..9c548d3c117 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -7,7 +7,15 @@ dashedName: step-45
 
 # --description--
 
-`label` elements are used to help associate the text for an `input` element with the `input` element itself (especially for assistive technologies like screen readers). For example, `<label><input type="radio"> cat</label>` makes it so clicking the word `cat` also selects the corresponding radio button.
+`label` elements are used to help associate the text for an `input` element with the `input` element itself (especially for assistive technologies like screen readers). 
+
+Here is an example of a `label` element with a `radio` button:
+
+```html
+<label><input type="radio"> cat</label>
+```
+
+In the example, clicking on the word `"cat"` will also select the `radio` button.
 
 Nest your `radio` button inside a `label` element.
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
index f0242aeeac1..52ba46b19f9 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -9,6 +9,13 @@ dashedName: step-48
 
 Notice that both radio buttons can be selected at the same time. To make it so selecting one radio button automatically deselects the other, both buttons must have a `name` attribute with the same value.
 
+Here is an example of two radio buttons with the same `name` attribute:
+
+```html
+<input type="radio" name="meal"> Breakfast
+<input type="radio" name="meal"> Lunch
+```
+
 Add the `name` attribute with the value `indoor-outdoor` to both radio buttons.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
index 37c5be01393..88db383c4cf 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -9,6 +9,12 @@ dashedName: step-46
 
 The `id` attribute is used to identify specific HTML elements. Each `id` attribute's value must be unique from all other `id` values for the entire page.
 
+Here is an example of an `input` element with an `id` attribute:
+
+```html
+<input id="email">
+```
+
 Add an `id` attribute with the value `indoor` to the radio button. When elements have multiple attributes, the order of the attributes doesn't matter.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
index d5139e15ae4..350e9ec8389 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -7,7 +7,7 @@ dashedName: step-54
 
 # --description--
 
-Forms commonly use checkboxes for questions that may have more than one answer. For example, here's a checkbox with the option of `tacos`: `<input type="checkbox"> tacos`.
+Forms commonly use checkboxes for questions that may have more than one answer. The `input` element with a `type` attribute set to `checkbox` creates a checkbox.
 
 Under the `legend` element you just added, add an `input` with its `type` attribute set to `checkbox` and give it the option of:
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
index 5f487137b77..b621421647c 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -7,7 +7,15 @@ dashedName: step-61
 
 # --description--
 
-In order to make a checkbox checked or radio button selected by default, you need to add the `checked` attribute to it. There's no need to set a value to the `checked` attribute. Instead, just add the word `checked` to the `input` element, making sure there is space between it and other attributes.
+In order to make a checkbox checked or radio button selected by default, you need to add the `checked` attribute to it. 
+
+Here is an example of a radio button with the `checked` attribute:
+
+```html
+<input checked type="radio" name="meal" value="breakfast"> Breakfast
+```
+
+There's no need to set a value to the `checked` attribute. Instead, just add the word `checked` to the `input` element, making sure there is space between it and other attributes.
 
 Make the first radio button and the first checkbox selected by default.
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
index 6f9b9e0b027..37a76b9e0eb 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -7,7 +7,7 @@ dashedName: step-62
 
 # --description--
 
-Now you will add a footer section to the page.
+The `footer` element is used to define a footer for a document or section. A footer typically contains information about the author of the document, copyright data, links to terms of use, contact information, and more.
 
 After the `main` element, add a `footer` element.
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
index 2d245729fb7..71708712aff 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -9,6 +9,8 @@ dashedName: step-65
 
 Notice that everything you've added to the page so far is inside the `body` element. All page content elements that should be rendered to the page go inside the `body` element. However, other important information goes inside the `head` element.
 
+The `head` element is used to contain metadata about the document, such as its title, links to stylesheets, and scripts. Metadata is information about the page that isn't displayed directly on the page.
+
 Add a `head` element above the `body` element.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
index 93cbcd775c8..184f3bdce19 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -7,7 +7,9 @@ dashedName: step-67
 
 # --description--
 
-Notice that the entire contents of the page are nested within an `html` element. All other elements must be descendants of this `html` element.
+Notice that the entire contents of the page are nested within an `html` element. The `html` element is the root element of an HTML page and wraps all content on the page.
+
+You can also specify the language of your page by adding the `lang` attribute to the `html` element. 
 
 Add the `lang` attribute with the value `en` to the opening `html` tag to specify that the language of the page is English.
 
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
index 7c2cacc866f..f98f54be2de 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
@@ -9,6 +9,8 @@ dashedName: step-68
 
 All pages should begin with `<!DOCTYPE html>`. This special string is known as a <dfn>declaration</dfn> and ensures the browser tries to meet industry-wide specifications.
 
+`<!DOCTYPE html>` tells browsers that the document is an HTML5 document which is the latest version of HTML.
+
 Add this declaration as the first line of the code.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
index f2a355cb2ee..340aedd6fa1 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -9,6 +9,13 @@ dashedName: step-56
 
 There's another way to associate an `input` element's text with the element itself. You can nest the text within a `label` element and add a `for` attribute with the same value as the `input` element's `id` attribute.
 
+Here is an example of using the `for` attribute to associate a `label` with an `input` element:
+
+```html
+<label for="breakfast"> Breakfast </label>
+<input id="breakfast" type="radio" name="meal" value="breakfast">
+```
+
 Associate the text `Loving` with the checkbox by nesting only the text `Loving` in a `label` element and giving it an appropriate `for` attribute.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index c00f052ac96..8d1bf5b4d18 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -9,6 +9,15 @@ dashedName: step-16
 
 Before adding any new content, you should make use of a `section` element to separate the cat photos content from the future content.
 
+The `section` element is used to define sections in a document, such as chapters, headers, footers, or any other sections of the document. It is a semantic element that helps with SEO and accessibility.
+
+```html
+<section>
+  <h2>Section Title</h2>
+  <p>Section content...</p>
+</section>
+```
+
 Take your `h2`, comment, `p`, and anchor (`a`) elements and nest them in a `section` element.
 
 # --hints--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
index 6805937113e..72dab268cc5 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -17,6 +17,8 @@ Inside the `head` element, nest a `meta` element with an attribute named `charse
 
 Note that `meta` elements are self-closing.
 
+With that last change, you have completed the Cat Photo App project. Congratulations!
+
 # --hints--
 
 You should create a self-closing `meta` element within the `head` element.
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
index b97aa765ac6..3888d970c4d 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
+++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
@@ -7,7 +7,13 @@ dashedName: step-39
 
 # --description--
 
-In order for a form's data to be accessed by the location specified in the `action` attribute, you must give the text field a `name` attribute and assign it a value to represent the data being submitted. For example, you could use the following syntax for an email address text field: `<input type="text" name="email">`.
+In order for a form's data to be accessed by the location specified in the `action` attribute, you must give the text field a `name` attribute and assign it a value to represent the data being submitted. 
+
+Here is an example of an `input` element with a `name` attribute:
+
+```html
+<input type="text" name="name">
+```
 
 Add the `name` attribute with the value `catphotourl` to your text field.