fix(curriculum): intro, descriptions and tests in cat blog page workshop (#57984)

2026-09-24 23:01:18 +08:00 · 2025-01-08 10:31:22 -08:00
parent 56e520b2e4
commit 5539605aca
20 changed files with 98 additions and 71 deletions
@@ -1856,7 +1856,7 @@
      "workshop-blog-page": {
        "title": "Build a Cat Blog Page",
        "intro": [
-          "In this workshop, you will learn how to build an HTML only blog page using semantic elements including the <code>main</code>, <code>nav</code>, <code>article</code> and <code>footer</code> elements."
+          "In this workshop, you will build an HTML only blog page using semantic elements including the <code>main</code>, <code>nav</code>, <code>article</code> and <code>footer</code> elements."
        ]
      },
      "lab-event-hub": {
@@ -6,4 +6,4 @@ superBlock: full-stack-developer

 ## Introduction to the Build a Cat Blog Page

-This is the second workshop for the new full stack developer certification.
+In this workshop, you will build an HTML only blog page using semantic elements including the <code>main</code>, <code>nav</code>, <code>article</code> and <code>footer</code> elements.
@@ -8,11 +8,11 @@ demoType: onLoad

 # --description--

-In this workshop, you will learn how to work with semantic HTML by building a blog page dedicated to Mr. Whiskers the cat. 
+In this workshop, you will practice working with semantic HTML by building a blog page dedicated to Mr. Whiskers the cat. 

 To begin the project, add the `<!DOCTYPE html>`, and an `html` element with a `lang` attribute of `en`.

-Remember that you learned how to build a basic HTML boilerplate like this in the previous workshop.
+Remember that you learned how to build a basic HTML boilerplate like this in the previous module.

 ```html
 <!DOCTYPE html>
@@ -37,7 +37,7 @@ assert.match(code, /<head>[.\n\s]*<\/head>/im)
 <!DOCTYPE html>
 <html lang="en">
 --fcc-editable-region--
-
+  
 --fcc-editable-region--
 </html>
 ```
@@ -80,7 +80,7 @@ assert.strictEqual(titleText, "Mr. Whiskers' Blog");
 <html lang="en">
  --fcc-editable-region--
  <head>
-
+    
  </head>
  --fcc-editable-region--
 </html>
@@ -13,7 +13,7 @@ Below the `h1` element, start by adding a `figure` element.

 Inside the `figure` element, add an `img` element.

-The `img` `src` attribute should have a value of `"https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"` and the `alt` text should have a value of `"a cat peacefully sleeping"`.
+The `src` attribute of the `img` should have a value of `"https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"` and the `alt` text should have a value of `"a cat peacefully sleeping"`.

 Below your `img` element, add a `figcaption` with the text `Mr. Whiskers Sleeping`.

@@ -35,7 +35,7 @@ Your `figure` element should be within your `header` element.

 ```js
 const figureElement = document.querySelector('figure');
-assert(figureElement.parentElement.tagName === 'HEADER');
+assert(figureElement?.parentElement.tagName === 'HEADER');
 ```

 You should have an `img` element. 
@@ -48,14 +48,14 @@ Your `img` element should be within your `figure` element.

 ```js
 const imgElement = document.querySelector('img');
-assert.strictEqual(imgElement.parentElement.tagName, 'FIGURE');
+assert.strictEqual(imgElement?.parentElement.tagName, 'FIGURE');
 ```

 Your `img` element should have a `src` attribute set to `"https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"`.

 ```js
 const imgElement = document.querySelector('img');
-const src = imgElement.getAttribute('src');
+const src = imgElement?.getAttribute('src');

 assert.strictEqual(src, 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
 ```
@@ -64,7 +64,7 @@ Your `img` element should have an `alt` attribute set to `"a cat peacefully slee

 ```js
 const imgElement = document.querySelector('img');
-const alt = imgElement.getAttribute('alt');
+const alt = imgElement?.getAttribute('alt');

 assert.strictEqual(alt, 'a cat peacefully sleeping');
 ```
@@ -85,21 +85,21 @@ Your `figcaption` element should be within your `figure` element.

 ```js
 const figcaptionElement = document.querySelector('figcaption');
-assert.strictEqual(figcaptionElement.parentElement.tagName, 'FIGURE');
+assert.strictEqual(figcaptionElement?.parentElement.tagName, 'FIGURE');
 ```

 Your `figcaption` element should have a the text of `Mr. Whiskers Sleeping`.

 ```js
 const figcaptionElement = document.querySelector('figcaption');
-assert.strictEqual(figcaptionElement.innerText, "Mr. Whiskers Sleeping")
+assert.strictEqual(figcaptionElement?.innerText, "Mr. Whiskers Sleeping")
 ```

 Your `figcaption` should be below the `img` element. You have them in the wrong order.

 ```js
 const figureElement = document.querySelector('figure');
-assert.strictEqual(figureElement.lastElementChild.tagName, "FIGCAPTION")
+assert.strictEqual(figureElement?.lastElementChild?.tagName, "FIGCAPTION")
 ```

 # --seed--
@@ -45,7 +45,7 @@ Your `nav` element should be within your `header` element.

 ```js
 const navElement = document.querySelector('nav');
-assert.strictEqual(navElement.parentElement.tagName, 'HEADER');
+assert.strictEqual(navElement?.parentElement.tagName, 'HEADER');
 ```

 Your `ul` element should have an opening tag. 
@@ -64,7 +64,7 @@ Your `ul` element should be within your `nav` element.

 ```js
 const ulElement = document.querySelector('ul');
-assert.strictEqual(ulElement.parentElement.tagName, 'NAV');
+assert.strictEqual(ulElement?.parentElement.tagName, 'NAV');
 ```

 Your `ul` element should contain three `li` elements.
@@ -73,7 +73,7 @@ Your `ul` element should contain three `li` elements.
 const ulElement = document.querySelector("ul");

 const liElements = ulElement.querySelectorAll("li");
-assert.strictEqual(liElements.length, 3);
+assert.strictEqual(liElements?.length, 3);
 ```

 # --seed--
@@ -97,9 +97,9 @@ assert.strictEqual(liElements.length, 3);
        />
        <figcaption>Mr. Whiskers Sleeping</figcaption>
      </figure>
-        --fcc-editable-region--
-
-        --fcc-editable-region--
+--fcc-editable-region--
+      
+--fcc-editable-region--
    </header>
  </body>
 </html>
@@ -21,14 +21,14 @@ Your first anchor element should have the text of `About` inside your first `li`

 ```js
 const anchorElement = document.querySelector("ul li:first-child a");
-assert.strictEqual(anchorElement.innerText, "About");
+assert.strictEqual(anchorElement?.innerText, "About");
 ```

 Your first anchor element should have an `href` attribute set to `"#about"`.

 ```js
 const anchorElement = document.querySelector("ul li:first-child a");
-const hrefAttribute = anchorElement.getAttribute("href");
+const hrefAttribute = anchorElement?.getAttribute("href");
 assert.strictEqual(hrefAttribute, "#about");
 ```

@@ -36,14 +36,14 @@ Your second anchor element should have the text of `Posts` inside your second `l

 ```js
 const anchorElement = document.querySelector("ul li:nth-child(2) a");
-assert.strictEqual(anchorElement.innerText, "Posts");
+assert.strictEqual(anchorElement?.innerText, "Posts");
 ```

 Your second anchor element should have an `href` attribute set to `"#posts"`.

 ```js
 const anchorElement = document.querySelector("ul li:nth-child(2) a");
-const hrefAttribute = anchorElement.getAttribute("href");
+const hrefAttribute = anchorElement?.getAttribute("href");
 assert.strictEqual(hrefAttribute, "#posts");
 ```

@@ -51,14 +51,14 @@ Your third anchor element should have the text of `Contact` inside your third `l

 ```js
 const anchorElement = document.querySelector("ul li:last-child a");
-assert.strictEqual(anchorElement.innerText, "Contact");
+assert.strictEqual(anchorElement?.innerText, "Contact");
 ```

 Your third anchor element should have an `href` attribute set to `"#contact"`.

 ```js
 const anchorElement = document.querySelector("ul li:last-child a");
-const hrefAttribute = anchorElement.getAttribute("href");
+const hrefAttribute = anchorElement?.getAttribute("href");
 assert.strictEqual(hrefAttribute, "#contact");
 ```

@@ -31,14 +31,14 @@ Your `section` element should have an `id` set to `"about"`.

 ```js
 const sectionElement = document.querySelector('section');
-assert.strictEqual(sectionElement.getAttribute("id"), "about");
+assert.strictEqual(sectionElement?.getAttribute("id"), "about");
 ```

 Your `section` element should be within your `main` element.

 ```js
 const sectionElement = document.getElementById('about');
-assert.strictEqual(sectionElement.parentElement.tagName, 'MAIN');
+assert.strictEqual(sectionElement?.parentElement.tagName, 'MAIN');
 ```

 Your `h2` element should have an opening tag. 
@@ -57,14 +57,14 @@ Your `h2` element should have the text of `About`. Double check your spelling.

 ```js
 const h2Element = document.querySelector('body h2');
-assert.strictEqual(h2Element.innerText, "About");
+assert.strictEqual(h2Element?.innerText, "About");
 ```

 Your `h2` element should be within your `section` element.

 ```js
 const h2Element = document.querySelector('#about h2');
-assert.strictEqual(h2Element.parentElement.tagName, 'SECTION');
+assert.strictEqual(h2Element?.parentElement.tagName, 'SECTION');
 ```

 # --seed--
@@ -98,7 +98,7 @@ assert.strictEqual(h2Element.parentElement.tagName, 'SECTION');
    </header>
 --fcc-editable-region--
    <main>
-
+      
    </main>
 --fcc-editable-region--
  </body>
@@ -7,7 +7,7 @@ dashedName: step-13

 # --description--

-Now that you have added the about section, try clicking on the About link to see the page jump down to that section.
+Now that you have added the about section, try clicking on the `About` link to see the page jump down to that section.

 The next section in the blog page will be a list of posts talking about Mr. Whiskers.

@@ -39,21 +39,21 @@ Your `section` element should be within your `main` element.

 ```js
 const sectionElement = document.getElementById('posts');
-assert.strictEqual(sectionElement.parentElement.tagName, 'MAIN');
+assert.strictEqual(sectionElement?.parentElement.tagName, 'MAIN');
 ```

 Your `h2` element should be inside the `section` element.

 ```js
 const h2Element = document.querySelector('#posts h2');
-assert.strictEqual(h2Element.parentElement.tagName, 'SECTION');
+assert.strictEqual(h2Element?.parentElement.tagName, 'SECTION');
 ```

 Your `h2` element should have the text of `Posts`.

 ```js
 const h2Element = document.querySelector('#posts h2');
-assert.strictEqual(h2Element.innerText, 'Posts');
+assert.strictEqual(h2Element?.innerText, 'Posts');
 ```

 # --seed--
@@ -96,7 +96,7 @@ assert.strictEqual(h2Element.innerText, 'Posts');
        </p>
      </section>
      --fcc-editable-region--
-
+      
      --fcc-editable-region--
    </main>
  </body>
@@ -42,7 +42,7 @@ Your `article` element should be within your `section` element with the `id` set

 ```js
 const articleElement = document.querySelector('#posts article');
-assert.strictEqual(articleElement.parentElement.tagName, 'SECTION');
+assert.strictEqual(articleElement?.parentElement.tagName, 'SECTION');
 ```

 Your code should have an opening `h3` tag.
@@ -61,14 +61,14 @@ Your `h3` element should have the text of `Mr. Whiskers' First Day Home`.

 ```js
 const h3Element = document.querySelector('h3');
-assert.strictEqual(h3Element.innerText, "Mr. Whiskers' First Day Home");
+assert.strictEqual(h3Element?.innerText, "Mr. Whiskers' First Day Home");
 ```

 Your `h3` element should be within your `article` element.

 ```js
 const h3Element = document.querySelector('#posts article h3');
-assert.strictEqual(h3Element.parentElement.tagName, 'ARTICLE');
+assert.strictEqual(h3Element?.parentElement.tagName, 'ARTICLE');
 ```

 # --seed--
@@ -113,7 +113,7 @@ assert.strictEqual(h3Element.parentElement.tagName, 'ARTICLE');
 --fcc-editable-region--
      <section id="posts">
        <h2>Posts</h2>
-
+        
      </section>
 --fcc-editable-region--
    </main>
@@ -39,7 +39,7 @@ Your first paragraph element should have lorem ipsum text. Double check for spel
 const paragraphElement = document.querySelector('article p:first-of-type');
 const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.`

-assert.strictEqual(paragraphElement.innerText, loremIpsum);
+assert.strictEqual(paragraphElement?.innerText, loremIpsum);
 ```

 Your second paragraph element should have lorem ipsum text. Double check for spelling and punctuation errors. 
@@ -48,7 +48,16 @@ Your second paragraph element should have lorem ipsum text. Double check for spe
 const paragraphElement = document.querySelector('article p:last-of-type');
 const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.`

-assert.strictEqual(paragraphElement.innerText, loremIpsum);
+assert.strictEqual(paragraphElement?.innerText, loremIpsum);
+```
+
+Your paragraphs should come after the `h3` element.
+
+```js
+let h3 = document.querySelectorAll('article > p ~ h3');
+assert.isEmpty(h3);
+const paragraphs = document.querySelectorAll('article > h3 ~ p');
+assert.lengthOf(paragraphs, 2);
 ```

 # --seed--
@@ -95,7 +104,7 @@ assert.strictEqual(paragraphElement.innerText, loremIpsum);
        --fcc-editable-region--
        <article>
          <h3>Mr. Whiskers' First Day Home</h3>
-
+          
        </article>
        --fcc-editable-region--
      </section>
@@ -19,21 +19,21 @@ You should have a second `article` element within your `section` element with th

 ```js
 const articleElement = document.querySelector('#posts article:nth-of-type(2)');
-assert.strictEqual(articleElement.parentElement.tagName, 'SECTION');
+assert.strictEqual(articleElement?.parentElement.tagName, 'SECTION');
 ```

 You should have an `h3` element inside the `article` element with the text of `Mr. Whiskers' First Bath`.

 ```js
 const h3Element = document.querySelector('#posts article:nth-of-type(2) h3');
-assert.strictEqual(h3Element.innerText, "Mr. Whiskers' First Bath");
+assert.strictEqual(h3Element?.innerText, "Mr. Whiskers' First Bath");
 ```

 Your `h3` element should be within your `article` element.

 ```js
 const h3Element = document.querySelector('#posts article:nth-of-type(2) h3');
-assert.strictEqual(h3Element.parentElement.tagName, 'ARTICLE');
+assert.strictEqual(h3Element?.parentElement.tagName, 'ARTICLE');
 ```

 You should have two paragraph elements inside the `article` element.
@@ -49,7 +49,7 @@ Your first paragraph element should have lorem ipsum text. Double check for spel
 const paragraphElement = document.querySelector('#posts article:nth-of-type(2) p:first-of-type');
 const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.`

-assert.strictEqual(paragraphElement.innerText, loremIpsum);
+assert.strictEqual(paragraphElement?.innerText, loremIpsum);
 ```

 Your second paragraph element should have lorem ipsum text. Double check for spelling and punctuation errors. 
@@ -58,7 +58,16 @@ Your second paragraph element should have lorem ipsum text. Double check for spe
 const paragraphElement = document.querySelector('#posts article:nth-of-type(2) p:last-of-type');
 const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.`

-assert.strictEqual(paragraphElement.innerText, loremIpsum);
+assert.strictEqual(paragraphElement?.innerText, loremIpsum);
+```
+
+Your paragraphs should come after the `h3` element.
+
+```js
+let h3 = document.querySelectorAll('#posts article:nth-of-type(2) > p ~ h3');
+assert.isEmpty(h3);
+const paragraphs = document.querySelectorAll('#posts article:nth-of-type(2) > h3 ~ p');
+assert.lengthOf(paragraphs, 2);
 ```

 # --seed--
@@ -119,7 +128,7 @@ assert.strictEqual(paragraphElement.innerText, loremIpsum);
          </p>
        </article>
        --fcc-editable-region--
-
+        
        --fcc-editable-region--
      </section>
    </main>
@@ -19,21 +19,21 @@ You should have a third `article` element within your `section` element with the

 ```js
 const articleElement = document.querySelector('#posts article:nth-of-type(3)');
-assert.strictEqual(articleElement.parentElement.tagName, 'SECTION');
+assert.strictEqual(articleElement?.parentElement.tagName, 'SECTION');
 ```

 You should have an `h3` element inside the `article` element with the text of `Mr. Whiskers' First Birthday Party`.

 ```js
 const h3Element = document.querySelector('#posts article:nth-of-type(3) h3');
-assert.strictEqual(h3Element.innerText, "Mr. Whiskers' First Birthday Party");
+assert.strictEqual(h3Element?.innerText, "Mr. Whiskers' First Birthday Party");
 ```

 Your `h3` element should be within your `article` element.

 ```js
 const h3Element = document.querySelector('#posts article:nth-of-type(3) h3');
-assert.strictEqual(h3Element.parentElement.tagName, 'ARTICLE');
+assert.strictEqual(h3Element?.parentElement.tagName, 'ARTICLE');
 ```

 You should have two paragraph elements inside the `article` element.
@@ -49,7 +49,7 @@ Your first paragraph element should have lorem ipsum text. Double check for spel
 const paragraphElement = document.querySelector('#posts article:nth-of-type(3) p:first-of-type');
 const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.`

-assert.strictEqual(paragraphElement.innerText, loremIpsum);
+assert.strictEqual(paragraphElement?.innerText, loremIpsum);
 ```

 Your second paragraph element should have lorem ipsum text. Double check for spelling and punctuation errors. 
@@ -58,7 +58,16 @@ Your second paragraph element should have lorem ipsum text. Double check for spe
 const paragraphElement = document.querySelector('#posts article:nth-of-type(3) p:last-of-type');
 const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.`

-assert.strictEqual(paragraphElement.innerText, loremIpsum);
+assert.strictEqual(paragraphElement?.innerText, loremIpsum);
+```
+
+Your paragraphs should come after the `h3` element.
+
+```js
+let h3 = document.querySelectorAll('#posts article:nth-of-type(3) > p ~ h3');
+assert.isEmpty(h3);
+const paragraphs = document.querySelectorAll('#posts article:nth-of-type(3) > h3 ~ p');
+assert.lengthOf(paragraphs, 2);
 ```

 # --seed--
@@ -134,7 +143,7 @@ assert.strictEqual(paragraphElement.innerText, loremIpsum);
          </p>
        </article>
 --fcc-editable-region--
-
+        
 --fcc-editable-region--
      </section>
    </main>
@@ -31,7 +31,7 @@ Your `footer` element should be within your `body` element.

 ```js
 const footerElement = document.querySelector('footer');
-assert.strictEqual(footerElement.parentElement.tagName, 'BODY');
+assert.strictEqual(footerElement?.parentElement.tagName, 'BODY');
 ```

 # --seed--
@@ -124,7 +124,7 @@ assert.strictEqual(footerElement.parentElement.tagName, 'BODY');
      </section>
    </main>
    --fcc-editable-region--
-
+    
    --fcc-editable-region--
  </body>
 </html>
@@ -17,28 +17,28 @@ You should have a `section` element inside your `footer` element.

 ```js
 const sectionElement = document.querySelector('footer section');
-assert.strictEqual(sectionElement.parentElement.tagName, 'FOOTER');
+assert.strictEqual(sectionElement?.parentElement.tagName, 'FOOTER');
 ```

 Your `section` element should have an `id` set to `"contact"`.

 ```js
 const sectionElement = document.querySelector('footer section');
-assert.strictEqual(sectionElement.getAttribute("id"), 'contact');
+assert.strictEqual(sectionElement?.getAttribute("id"), 'contact');
 ```

 You should have an `h2` element inside your `section` element.

 ```js
 const sectionElement = document.querySelector('footer section h2');
-assert.strictEqual(sectionElement.parentElement.tagName, 'SECTION');
+assert.strictEqual(sectionElement?.parentElement.tagName, 'SECTION');
 ```

 Your `h2` element should have the text of `Contact`.

 ```js
 const h2Element = document.querySelector('#contact h2');
-assert.strictEqual(h2Element.innerText, 'Contact');
+assert.strictEqual(h2Element?.innerText, 'Contact');
 ```


@@ -40,7 +40,7 @@ Your `address` element should be within your `section` element.

 ```js
 const addressElement = document.querySelector('footer #contact address');
-assert.strictEqual(addressElement.parentElement.tagName, 'SECTION');
+assert.strictEqual(addressElement?.parentElement.tagName, 'SECTION');
 ```

 # --seed--
@@ -136,7 +136,7 @@ assert.strictEqual(addressElement.parentElement.tagName, 'SECTION');
    <footer>
      <section id="contact">
        <h2>Contact</h2>
-      
+              
      </section>
    </footer>
 --fcc-editable-region--
@@ -30,14 +30,14 @@ Your first `p` element should have the text of `Phone: 555-555-5555`.

 ```js
 const pElement = document.querySelector('#contact p:first-child');
-assert.strictEqual(pElement.innerText, 'Phone: 555-555-5555');
+assert.strictEqual(pElement?.innerText, 'Phone: 555-555-5555');
 ```

 Your second `p` element should have the text of `Email: fake@email.com`.

 ```js
 const pElement = document.querySelector('#contact p:last-child');
-assert.strictEqual(pElement.innerText, 'Email: fake@email.com');
+assert.strictEqual(pElement?.innerText, 'Email: fake@email.com');
 ```

 # --seed--
@@ -134,7 +134,7 @@ assert.strictEqual(pElement.innerText, 'Email: fake@email.com');
      <section id="contact">
        <h2>Contact</h2>
        <address>
-
+          
        </address>
      </section>
    </footer>
@@ -36,7 +36,7 @@ Your `h1` element should be nested inside your `header` element.

 ```js
 const h1Element = document.querySelector("h1");
-assert.strictEqual(h1Element.parentElement.tagName, 'HEADER');
+assert.strictEqual(h1Element?.parentElement.tagName, 'HEADER');
 ```

 # --seed--
@@ -25,14 +25,14 @@ Your first paragraph should be nested inside the `section` element.

 ```js
 const pElement = document.querySelector('#about p:first-of-type');
-assert.strictEqual(pElement.parentElement.tagName, 'SECTION');
+assert.strictEqual(pElement?.parentElement.tagName, 'SECTION');
 ```

 You should have a second paragraph inside your `section` element.

 ```js
 const pElement = document.querySelectorAll('#about p');
-assert.strictEqual(pElement.length, 2);
+assert.strictEqual(pElement?.length, 2);
 ```

 Your second paragraph should have the text of `His playful nature and boundless energy keeps me on my toes. I love him so much.` Double check your spelling.
@@ -40,7 +40,7 @@ Your second paragraph should have the text of `His playful nature and boundless
 ```js
 const pElement = document.querySelector('#about p:last-of-type');
 const text = "His playful nature and boundless energy keeps me on my toes. I love him so much."
-assert.strictEqual(pElement.innerText, text);
+assert.strictEqual(pElement?.innerText, text);
 ```

 # --seed--
@@ -76,7 +76,7 @@ assert.strictEqual(pElement.innerText, text);
      --fcc-editable-region--
      <section id="about">
        <h2>About</h2>
-      
+        
      </section>
      --fcc-editable-region--
    </main>