fix(curriculum): inconsistencies for code examples in cat photo app (#54526)

Co-authored-by: Naomi <nhcarrigan@gmail.com>
2026-05-28 18:26:54 +00:00 · 2024-04-26 10:33:16 -07:00
parent 84a81c842b
commit 17eb7301bd
33 changed files with 198 additions and 19 deletions
@@ -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.
@@ -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:

@@ -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:

@@ -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--
@@ -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--
@@ -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:

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

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

@@ -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>
@@ -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--
@@ -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--
@@ -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--
@@ -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>
@@ -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:

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

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

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

@@ -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:

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

@@ -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--
@@ -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--
@@ -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:

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

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

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

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