Need 2nd pair of eyes on Product Landing page

1

Similar to what I had going on in a previous forum entry. My Product Landing Page that I did back when Free Code Camp used Codepen.io for building and test running passes on Codepen but fails to acknowledge that there are nav-link elements and that they each contain and href attribute. I’m also getting an error after that says…

“// console output
[TypeError: Cannot read properties of null (reading ‘slice’)]”

I’m sure it is a difference in how Codepen renders and how FCC renders screens but I do not know what I"m looking for.

2

I copied your code and added the link tag and it passes on my end.
I am not able to reproduce the error you are seeing.

Maybe you need to clear out the browser cache and trying copying and pasting again

3

Sorry. Link Tag ? What was I missing from the code?

4

The link element is used to link a stylesheet to the html document.

You will need that to properly link your css stylesheet to your html or else none of the styles will show up on the page.

If you want to learn more about the link element, then you should review the cafe menu project because it is covered there

hope that helps

5

I don’t know if the email reply works so I’m being redundant here. Yes I understand now the link so the file knows where to find the stylesheet. I did add that to my code right after I copied and pasted it from Codepen. In any case, I cleared the cache and restarted the browser but I still get the errors

Each .nav-link element should have an href attribute.
Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element's id. e.g. #footer).
// tests completed
// console output
[TypeError: Cannot read properties of null (reading 'slice')]

Unsure if there is a way to share a link to the project on FCC

6

You should copy your entire code with the link element so we can test it on our end to see if we can reproduce the problem

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

Sans CSS

<link rel="stylesheet" href="styles.css">
<header id="header">
  <img src="https://www.freepnglogos.com/uploads/bread-png/bread-bakery-equipment-for-sale-baking-equipment-for-sale-37.png" id="header-img" />
  <nav id="nav-bar">
    <ul>
      <li>
        <a class="nav-link" <href="#Home">Home</a>
      </li>
      <li>
        <a class="nav-link" href="#about">About</a>        
      </li>
      <li>
        <a class="nav-link" href="#Video">Video</a>
      </li>
      <li>
        <a class="nav-link" href="#ContactMe">Contact</a>        
      </li>
    </ul>
  </nav>
</header>
<br>
<section id="Title">
  <h1>Bull City Home Bakery</h1>
</section>
<section id="about">
  <div class="grid">
   <div class="icon">
    <img src="https://www.svgrepo.com/show/30963/cookie.svg" alt="cookie_icon" class="cookie"/>
   </div>
   <div class="About">
      <h2>What Is Made</h2>
      <p>Can make lean doughs, enriched doughs, whoopie pies, babkas, pies and cakes</p>
   </div>
  </div>
  <div class="grid">
    <div class="icon"> 
      <img src="https://www.svgrepo.com/show/30963/cookie.svg" alt="cookie_icon" class="cookie"/>
    </div>
    <div class="About">
      <h2>Location</h2>
      <p>Located right in Triangle region of North Carolina</p>
    </div>
  </div>
  <div class = "grid">
    <div class="icon">
    <img src="https://www.svgrepo.com/show/30963/cookie.svg" alt="cookie_icon" class="cookie"/>
  </div>
    <div class ="About">
      <h2>Shipping</h2>
      <p>Products can be shipped to anywhere in the continental United States.</p>
     </div>
  </div>
</section>
<section id="Video">
  <iframe width="550" height="315" id="video" src="https://www.youtube.com/embed/fFXp-StcueY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
  </iframe>
</section>
<section id="ContactMe">
    <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
        Who Are You?
      <br>
      <input type="email" name="email" id="email" placeholder="Enter Your Email Here" required="true">
        <input type="submit" value="Send It On" name="Submit" id="submit">
    </form>
</section>```
8

Finally found the issue

The html you just posted is different then your codepen HTML.

The error message of
Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer).

told me there was a section missing with the corresponding id.

And in the latest code your posted you are missing this <section id="Home"></section>
Your original codepen had that, so you must have removed that by accident.

9

I blame my puppy for walking on the keyboard while I was trying to do this. Hahahaha. No more editing for him. Thank you.

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.