link element, meta element and more."
]
},
"workshop-cat-photo-app": {
diff --git a/client/src/pages/learn/full-stack-developer/lab-debug-pet-adoption-page/index.md b/client/src/pages/learn/full-stack-developer/lab-debug-pet-adoption-page/index.md
new file mode 100644
index 00000000000..765295ba655
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/lab-debug-pet-adoption-page/index.md
@@ -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.
diff --git a/client/src/pages/learn/full-stack-developer/lecture-understanding-html-attributes/index.md b/client/src/pages/learn/full-stack-developer/lecture-understanding-html-attributes/index.md
new file mode 100644
index 00000000000..58aaf946610
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/lecture-understanding-html-attributes/index.md
@@ -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.
diff --git a/client/src/pages/learn/full-stack-developer/lecture-understanding-the-html-boilerplate/index.md b/client/src/pages/learn/full-stack-developer/lecture-understanding-the-html-boilerplate/index.md
new file mode 100644
index 00000000000..9db17ac6c55
--- /dev/null
+++ b/client/src/pages/learn/full-stack-developer/lecture-understanding-the-html-boilerplate/index.md
@@ -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.
diff --git a/client/src/pages/learn/full-stack-developer/lecture-what-is-html/index.md b/client/src/pages/learn/full-stack-developer/lecture-what-is-html/index.md
deleted file mode 100644
index ac4a2763bdb..00000000000
--- a/client/src/pages/learn/full-stack-developer/lecture-what-is-html/index.md
+++ /dev/null
@@ -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.
diff --git a/curriculum/challenges/_meta/lab-debug-pet-adoption-page/meta.json b/curriculum/challenges/_meta/lab-debug-pet-adoption-page/meta.json
new file mode 100644
index 00000000000..c2e3d051ca1
--- /dev/null
+++ b/curriculum/challenges/_meta/lab-debug-pet-adoption-page/meta.json
@@ -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
+}
diff --git a/curriculum/challenges/_meta/lecture-understanding-html-attributes/meta.json b/curriculum/challenges/_meta/lecture-understanding-html-attributes/meta.json
new file mode 100644
index 00000000000..65269630e1f
--- /dev/null
+++ b/curriculum/challenges/_meta/lecture-understanding-html-attributes/meta.json
@@ -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"
+}
diff --git a/curriculum/challenges/_meta/lecture-what-is-html/meta.json b/curriculum/challenges/_meta/lecture-understanding-the-html-boilerplate/meta.json
similarity index 60%
rename from curriculum/challenges/_meta/lecture-what-is-html/meta.json
rename to curriculum/challenges/_meta/lecture-understanding-the-html-boilerplate/meta.json
index afcfd815812..cf98f4861df 100644
--- a/curriculum/challenges/_meta/lecture-what-is-html/meta.json
+++ b/curriculum/challenges/_meta/lecture-understanding-the-html-boilerplate/meta.json
@@ -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"
+ ]
}
diff --git a/curriculum/challenges/english/25-front-end-development/lab-debug-pet-adoption-page/685239f0cad43c7a909cbd98.md b/curriculum/challenges/english/25-front-end-development/lab-debug-pet-adoption-page/685239f0cad43c7a909cbd98.md
new file mode 100644
index 00000000000..ab3c74ad0f1
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/lab-debug-pet-adoption-page/685239f0cad43c7a909cbd98.md
@@ -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 `` 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 `` 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
+Consider adopting a pet today. We have cats, dogs, rabbits and more.
+ +Consider adopting a pet today. We have cats, dogs, rabbits and more.
+ +
+
+