fix(new RWD): steps with code blocks at the end of Catphotos Project's sentences (#46519)

* fix(curriculum): first 9 steps ending with code blocks * I like it👌 * step 18 moved Things cats love * Step 20 moved three list items * step 21 moved alt text from the end of sentence * step 23 moved figure text from end the sentence * accessiblity for step 1 * accessiblity step 2 * step 4 accessiblity * accessiblity step 8 * accessiblity step 9 * step 18 accessiblity * step 20 accessiblity * step 21 accessiblity * step 23 accessiblity * step 25 changed text from the end of sentence * step 26 text from back of the sentence * step 29 moved text from back of the sentence * step 33 text from the end of the sentence * step 43 moved from end of the text * step 46 text moved from the end * step 53 end of the step * step 65 moved text from the end * Grammer errors, and better description Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> * Change step 34 description Co-authored-by: Ilenia <nethleen@gmail.com> * Grammar typos Co-authored-by: Ilenia <nethleen@gmail.com> Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: Ilenia <nethleen@gmail.com>
2026-05-28 18:26:54 +00:00 · 2022-06-19 19:13:51 +02:00
parent 021c6247fe
commit 8fed888056
17 changed files with 61 additions and 17 deletions
@@ -9,7 +9,11 @@ dashedName: step-1

 HTML elements have opening tags like `<h1>` and closing tags like `</h1>`.

-Find the `h1` element and change the text between its opening and closing tags to say `CatPhotoApp`.
+Find the `h1` element and change its text to:
+
+ `CatPhotoApp`
+
+Make sure that the text is between its opening and closing tags.

 # --hints--

@@ -9,7 +9,9 @@ dashedName: step-2

 The `h1` to `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.

-Add an `h2` element below the `h1` element that says `Cat Photos`.
+Below the `h1` element, add an `h2` element with this text:
+
+`Cat Photos`

 # --hints--

@@ -9,7 +9,9 @@ dashedName: step-4

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

-Add a comment above the `p` element with the text `TODO: Add link to cat photos`.
+Add a comment above the `p` element with this text:
+
+`TODO: Add link to cat photos`

 # --hints--

@@ -9,7 +9,9 @@ dashedName: step-8

 HTML <dfn>attributes</dfn> are special words used inside the opening tag of an element to control the element's behavior. The `src` attribute in an `img` element specifies the image's URL (where the image is located). An example of an `img` element using an `src` attribute: `<img src="https://www.your-image-source.com/your-image.jpg">`.

-Add an `src` attribute to the existing `img` element that is set to the following URL: `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`.
+Inside the existing `img` element, add an `src` attribute with this URL:
+
+`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`

 # --hints--

@@ -9,7 +9,9 @@ dashedName: step-9

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

-Add an `alt` attribute to the `img` element with the text `A cute orange cat lying on its back`.
+Inside the `img` element, add an `alt` attribute with this text:
+
+`A cute orange cat lying on its back`

 # --hints--

@@ -9,7 +9,9 @@ dashedName: step-18

 When you add a lower rank heading element to the page, it's implied that you're starting a new subsection.

-After the last `h2` element of the second `section` element, add an `h3` element with the text `Things cats love:`.
+After the last `h2` element of the second `section` element, add an `h3` element with this text:
+
+`Things cats love:`

 # --hints--

@@ -16,7 +16,11 @@ Use list item (`li`) elements to create items in a list. Here is an example of l
 </ul>
 ```

-Nest three list items within the `ul` element to display three things cats love: `cat nip`, `laser pointers` and `lasagna`.
+Within the `ul` element nest three list items to display three things cats love:
+
+`cat nip`
+`laser pointers`
+`lasagna` 

 # --hints--

@@ -7,7 +7,13 @@ dashedName: step-21

 # --description--

-After the unordered list, add a new image with an `src` attribute value set to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg` and an `alt` attribute value set to `A slice of lasagna on a plate.`
+After the unordered list, add a new image with an `src` attribute value set to:
+
+`https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`
+
+And its `alt` attribute value to:
+
+`A slice of lasagna on a plate.`

 # --hints--

@@ -9,7 +9,9 @@ dashedName: step-23

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

-After the image nested in the `figure` element, add a `figcaption` element with the text `Cats love lasagna.`
+After the image nested in the `figure` element, add a `figcaption` element with text set to:
+
+`Cats love lasagna.`

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-25

 # --description--

-After the `figure` element, add another `h3` element with the text `Top 3 things cats hate:`.
+After the `figure` element, add another `h3` element with the text:
+
+`Top 3 things cats hate:`

 # --hints--

@@ -9,7 +9,11 @@ dashedName: step-26

 The code for an ordered list (`ol`) is similar to an unordered list, but list items in an ordered list are numbered when displayed.

-After the second `section` element's last `h3` element, add an ordered list with these three list items: `flea treatment`, `thunder` and `other cats`.
+After the second `section` element's last `h3` element, add an ordered list with these three list items:
+
+`flea treatment`
+`thunder`
+`other cats`

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-33

 # --description--

-Inside the third `section` element add an `h2` element with the text `Cat Form`.
+Inside the third `section` element, add an `h2` element with the text: 
+
+`Cat Form`

 # --hints--

@@ -11,7 +11,9 @@ You can use radio buttons for questions where you want only one answer out of mu

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

-Before the text input, add a radio button with the option `Indoor`.
+Before the text input, add a radio button with the option set as:
+
+`Indoor`

 # --hints--

@@ -9,7 +9,9 @@ dashedName: step-53

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

-Under the `legend` element you just added, add an `input` with its `type` attribute set to `checkbox` and give it the option of `Loving`.
+Under the `legend` element you just added, add an `input` with its `type` attribute set to `checkbox` and give it the option of:
+
+`Loving`

 # --hints--

@@ -9,7 +9,9 @@ dashedName: step-65

 The `title` element determines what browsers show in the title bar or tab for the page.

-Add a `title` element within the `head` element. Its text should be `CatPhotoApp`.
+Add a `title` element within the `head` element using the text below: 
+
+`CatPhotoApp`

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-29

 # --description--

-To improve accessibility of the image you just added, add an `alt` attribute with the text `Five cats looking around a field.`
+To improve accessibility of the image you just added, add an `alt` attribute with the text:
+
+`Five cats looking around a field.`

 # --hints--

@@ -7,7 +7,9 @@ dashedName: step-46

 # --description--

-Nest another radio button with the option `Outdoor` in a new `label` element. The new radio button should be placed after the first one. Also, set its `id` attribute value to `outdoor`.
+Nest another radio button with the option `Outdoor` in a new `label` element. The new radio button should be placed after the first one. Also, set its `id` attribute value to:
+
+`outdoor`

 # --hints--