feat(curriculum): adding Debug a Pet Adoption Page lab (#60917)

2026-05-28 18:26:54 +00:00 · 2025-06-21 00:31:59 -07:00
parent c983a1e576
commit d99a2bbf98
16 changed files with 187 additions and 30 deletions
@@ -2083,11 +2083,24 @@
          "In this lab, you will help Camperbot find and fix the errors in their code."
        ]
      },
-      "lecture-what-is-html": {
-        "title": "Understanding HTML Attributes and the HTML Boilerplate",
+      "lecture-understanding-html-attributes": {
+        "title": "Understanding HTML Attributes",
        "intro": [
          "In these lecture videos, you will learn more about HTML (HyperText Markup Language), a markup language for creating web pages.",
-          "You will learn about HTML's role on the web, the HTML boilerplate and what HTML attributes are."
+          "You will learn about HTML's role on the web, and what HTML attributes are."
+        ]
+      },
+      "lab-debug-pet-adoption-page": {
+        "title": "Debug a Pet Adoption Page",
+        "intro": [
+          "In this lab, you will need to find and fix the errors in this pet adoption page."
+        ]
+      },
+      "lecture-understanding-the-html-boilerplate": {
+        "title": "Understanding the HTML Boilerplate",
+        "intro": [
+          "In these lectures, you will learn about the HTML boilerplate which is a ready-made template for your webpages.",
+          "You will learn how to work with the <code>link</code> element, <code>meta</code> element and more."
        ]
      },
      "workshop-cat-photo-app": {
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Debug a Pet Adoption Page
+block: lab-debug-pet-adoption-page
+superBlock: full-stack-developer
+---
+
+## Introduction to the Debug a Pet Adoption Page
+
+In this lab, you will find and fix the errors in this pet adoption page.
@@ -0,0 +1,9 @@
+---
+title: Introduction to Understanding HTML Attributes
+block: lecture-understanding-html-attributes
+superBlock: full-stack-developer
+---
+
+## Introduction to Understanding HTML Attributes
+
+In these lecture videos, you will learn more about HTML (HyperText Markup Language), a markup language for creating web pages. You will learn about HTML's role on the web, and what HTML attributes are.
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Understanding the HTML Boilerplate
+block: lecture-understanding-the-html-boilerplate
+superBlock: full-stack-developer
+---
+
+## Introduction to the Understanding the HTML Boilerplate
+
+In these lectures, you will learn about the HTML boilerplate which is a ready-made template for your webpages.
@@ -1,9 +0,0 @@
---
-title: Introduction to What is HTML?
-block: lecture-what-is-html
-superBlock: full-stack-developer
---
-
-## Introduction to What is HTML?
-
-Learn what HTML is in these lecture videos.
@@ -0,0 +1,11 @@
+{
+  "name": "Debug a Pet Adoption Page",
+  "blockType": "lab",
+  "blockLayout": "link",
+  "isUpcomingChange": false,
+  "dashedName": "lab-debug-pet-adoption-page",
+  "superBlock": "full-stack-developer",
+  "helpCategory": "HTML-CSS",
+  "challengeOrder": [{ "id": "685239f0cad43c7a909cbd98", "title": "Debug a Pet Adoption Page" }],
+  "usesMultifileEditor": true
+}
@@ -0,0 +1,19 @@
+{
+  "name": "Understanding HTML Attributes and the HTML Boilerplate",
+  "isUpcomingChange": false,
+  "dashedName": "lecture-understanding-html-attributes",
+  "superBlock": "full-stack-developer",
+  "challengeOrder": [
+    {
+      "id": "66f6db08d55022680a3cfbc9",
+      "title": "What Role Does HTML Play on the Web?"
+    },
+    {
+      "id": "6708143cab2b583ecd3324f5",
+      "title": "What Are Attributes, and How Do They Work?"
+    }
+  ],
+  "helpCategory": "HTML-CSS",
+  "blockType": "lecture",
+  "blockLayout": "challenge-list"
+}
@@ -1,17 +1,12 @@
 {
-  "name": "Understanding HTML Attributes and the HTML Boilerplate",
+  "name": "Understanding the HTML Boilerplate",
+  "blockType": "lecture",
+  "blockLayout": "challenge-list",
  "isUpcomingChange": false,
-  "dashedName": "lecture-what-is-html",
+  "dashedName": "lecture-understanding-the-html-boilerplate",
  "superBlock": "full-stack-developer",
+  "helpCategory": "HTML-CSS",
  "challengeOrder": [
-    {
-      "id": "66f6db08d55022680a3cfbc9",
-      "title": "What Role Does HTML Play on the Web?"
-    },
-    {
-      "id": "6708143cab2b583ecd3324f5",
-      "title": "What Are Attributes, and How Do They Work?"
-    },
    {
      "id": "670838977810401844af6fe0",
      "title": "What Is the Role of the Link Element in HTML, and How Can It Be Used to Link to External Stylesheets?"
@@ -24,8 +19,5 @@
      "id": "670839051794aa19fcef6dc8",
      "title": "What Is UTF-8 Character Encoding, and Why Is It Needed?"
    }
-  ],
-  "helpCategory": "HTML-CSS",
-  "blockType": "lecture",
-  "blockLayout": "challenge-list"
+  ]
 }
@@ -0,0 +1,98 @@
+---
+id: 685239f0cad43c7a909cbd98
+title: Debug a Pet Adoption Page
+challengeType: 25
+dashedName: lab-debug-pet-adoption-page
+# Purposefully removed the demo type because I don't want any example to show since this is a debugging project.
+---
+
+# --description--
+
+Sally, a pet adoption store owner, has built her first web page but there are some issues.
+
+Your job is to fix all of the errors so Sally can continue building her page. 
+
+Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. Sally wants to use an image of some cats but it is not displaying correctly. You will need to fix the following in the `img` element:
+   - Replace the `href` attribute with the correct attribute for the image source. 
+   - Replace the `att` attribute with the correct attribute representing short, descriptive text for images.
+   - Remove the `</img>` closing tag because `img` elements are void elements and don't have closing tags.
+2. Sally wants to use some links to direct users to the dog and cat pages. But the links are not working correctly. You will need to fix the following in the `a` elements:
+   - Replace both `src` attributes with the correct attributes used to specify URLs.
+
+# --hints--
+
+Your `img` element should have a `src` attribute instead of the `href` attribute.
+
+```js
+const imgEl = document.querySelector("img");
+assert.isTrue(imgEl.hasAttribute("src"));
+```
+
+Your `img` element should have an `alt` attribute instead of the non-existent `att` attribute.
+
+```js
+const imgEl = document.querySelector("img");
+assert.isTrue(imgEl.hasAttribute("alt"));
+```
+
+Your `img` element should not have a `</img>` closing tag.
+
+```js
+assert.notMatch(code, /<\/img>/);
+```
+
+Your `a` element with the text `Visit cats page` needs to have an `href` attribute instead of a `src` attribute.
+
+```js
+const anchors = document.querySelectorAll("a");
+const catLink = Array.from(anchors).find(a => a.textContent.trim() === "Visit cats page");
+assert.isDefined(catLink);
+assert.isTrue(catLink.hasAttribute("href"));
+```
+
+Your `a` element with the text `Visit dogs page` needs to have an `href` attribute instead of a `src` attribute.
+
+```js
+const anchors = document.querySelectorAll("a");
+const dogLink = Array.from(anchors).find(a => a.textContent.trim() === "Visit dogs page");
+assert.isDefined(dogLink);
+assert.isTrue(dogLink.hasAttribute("href"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h1>Welcome XYZ Pet Adoption!</h1>
+<p>Consider adopting a pet today. We have cats, dogs, rabbits and more.</p>
+
+<h2>See our cats!</h2>
+<img href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" att="Five cats looking around a field."></img>
+
+<h2>Adopt a cat!</h2>
+<a src="/cats">Visit cats page</a>
+
+<h2>Adopt a dog!</h2>
+<a src="/dogs">Visit dogs page</a>
+```
+
+# --solutions--
+
+```html
+<h1>Welcome XYZ Pet Adoption!</h1>
+<p>Consider adopting a pet today. We have cats, dogs, rabbits and more.</p>
+
+<h2>See our cats!</h2>
+<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+
+<h2>Adopt a cat!</h2>
+<a href="/cats">Visit cats page</a>
+
+<h2>Adopt a dog!</h2>
+<a href="/dogs">Visit dogs page</a>
+```
@@ -16,7 +16,13 @@
              "dashedName": "lab-debug-camperbots-profile-page"
            },
            {
-              "dashedName": "lecture-what-is-html"
+              "dashedName": "lecture-understanding-html-attributes"
+            },
+            {
+              "dashedName": "lab-debug-pet-adoption-page"
+            },
+            {
+              "dashedName": "lecture-understanding-the-html-boilerplate"
            },
            {
              "dashedName": "workshop-cat-photo-app"
@@ -142,7 +142,7 @@ test.describe('Super Block Page - Authenticated User', () => {
      await page.addInitScript(() => {
        window.localStorage.setItem(
          'currentChallengeId',
-          '66f6db08d55022680a3cfbc9' // What Is HTML, and What Role Does It Play on the Web?
+          '66f6db08d55022680a3cfbc9' // What Role Does HTML Play on the Web?
        );
      });

@@ -160,10 +160,10 @@ test.describe('Super Block Page - Authenticated User', () => {
        })
      ).toHaveAttribute('aria-expanded', 'true');

-      // What is HTML block
+      // Understanding HTML Attributes block
      await expect(
        page.getByRole('button', {
-          name: /Lecture Understanding HTML Attributes and the HTML Boilerplate/
+          name: /Lecture Understanding HTML Attributes/
        })
      ).toHaveAttribute('aria-expanded', 'true');
    });