https://codepen.io/brooksdriskill/pen/abELxdj

Code Feedback
1

I can’t figure out why I can’t meet user stories 5, 11, and layout 1. What on earth am I doing wrong?

2

The first thing I would recommend is that you clean up your HTML. If you click on the caret icon in the upper right of the HTML editor and choose “Analyze HTML” you will see a bunch of issues that need fixing. I’m not saying this is going to automatically fix all of your problems, but it will at least rule out that it is causing any.

After you get your HTML cleaned up then let us know and we can tackle any remaining issues.

1 Like
3

As said, you have a lot of errors in the HTML. You also have HTML in the CSS. Until you fix the errors the tests are bound to fail.

I would suggest switching the Syntax Highlighting on Codepen. It will help catch syntax errors.

Go to your Codepen profile settings. Under “Editor Preferences” switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors. If there are issues you should see the code marked in red. That is the new Syntax Highlighting showing you where the problems are.

Press the down arrow to the right of the code boxes and select the “Analyze” option. You can also use a validator tool.

  1. Remove the .nav-link class from all elements that are not links inside your nav element.

  2. Make sure you have one nav element with the id #nav-bar and that you set the id correctly (<nav id="nav-bar">)

  3. You should have a single well-formed form element with the id of #form. It should have the input elements with the ids as per the requirements. I can’t really be more specific as to what you need to change. I would suggest you delete all form and input elements and start over.

  4. The header should be fixed at the top of the page. Use position: fixed (challenge that shows this).

4

I already did that before posting.

5

There are still problems here:


CHECK THE CODE continuously while working.

image


Rerun it through every time, until you see this:

image


1 Like
6

Brooks,
I just checked your code pen, and the code is becoming more and more problematic. If you don’t have a copy of the original code, I have one here:

You may consider asking for a more step-by-step approach to both analyzing and correcting your code.

<form id="form" action="https://www.freecodecamp.com/email-submit">
  <header id=header header-img> 
    <nav id="nav-bar">
    <b>Cute Dogs</b>
    <nav ""id""= "nav-bar" header-img>
      <img>
      <img id="image" src="https://imagesvc.meredithcorp.io/v3/mm/image?"        url="https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F37%2F2020%2F09%2F22%2F50-cute-dog-names.jpg" alt="cute dog">
  <h2>
    Purebred or Mutt, we have the cute dog you're looking for!
    </h2>
      <nav id="nav-link" class="button">
   <form ""id""="form" submit action="https://www.freecodecamp.com/email-submit">
     <nav class="nav-link">
     <ul>  
     <ul>
     <li><a class="nav-link" href="#Breeds">Breeds</a></li>
  <li><a class="nav-link" href="#Contact Us">Contact Us</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
      </ul>
       </li>
       </ul>    
    </nav>
<div id="page-wrapper" class="nav-link">
  <header id="header">
    <nav class="logo">
 <action="https://www.freecodecamp.com/
    email-submit" id="submit">
      <img
        id="header-img"
    <img id="image"  src="https://www.freecodecamp.com/email-submit"        url="https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F37%2F2020%2F09%2F22%2F50-cute-dog-names.jpg" alt="cute dog">
    </img>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <section id="Breeds" class="nav-link">
      <iframe
        id="video"
        height="315"
    src="https://www.youtube.com/results?search_query=dog+breeds+for+first+time+owners"
frameborder="0"
allowfullscreen
></iframe>
</section>
      <nav>
        <input ""id""="submit">
  <h3>
    <u>Email:</u> <input name="email" id="email" type="email" placeholder="Enter your email here"
   required/> 
    </input>
</h3>
<input type="submit" id="submit" value="submit" class="button" action="https://www.freecodecamp.com/email-submit"/>
    </input>
    </form>
      </nav>
    </label>
<div class="Container">
  <section id="Breeds">
    <div class="grid">
      <div class="icon"><i class="fa fa-3x fa-fire"></i></div>
        <div class="desc">
</div>
      <div>
<h3>
We have golden retrievers, rescue dogs of various combined breeds, and even one Australian Sheppard
      </h3>
<p>
  We hope you and your new furry friend love each other very much. Below is a list of breeds we have and that you will love.
      </p>
      </div>
      <section>
 <div class="grid">
   <nav>
        <div class="icon"><i class="Breeds"></i></div>
        <div class="desc">
          <nav id=".nav-link" class="button">
          <ul id="Breeds">
            <li>Golden Retrievers</li>
            <li>Australian Sheppard</li>
            <li>Rescued Mutts</li>
          </ul>
          </nav>
   </div>
   </section>
  <div class="grid">
   <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
        <nav a class="nav-link" href="Dog sizes"> 
          <h3>Dog sizes</h3>
<p> We have dogs of all sizes and ages</p>
    </div>
        </div>
   <br>
        <div class="grid">
     <div class="icon"><i class="fa fa-3x fa-truck"></i></div>
        <div a class="nav-link" href="Contact us"> 
           <h3>Contact us</h3> 
<p>Our phone number is 111-111-1111</p>
          
    </div>
        </div>
  
<section id="Contact Us">
      <iframe
        id="video"
        height="315"
src="https://www.youtube.com/results?search_query=dog+breeds+for+first+time+owners"
        frameborder="0"
        allowfullscreen
      ></iframe>
 <li><a class="nav-link" href="#pricing">Pricing</a></li>     
  </nav>
  </header>
    <section id="pricing">
      <div class="product" id="tenor">
        <div class="level">Big Dogs</div>
        <h3>$100</h3>
        <ol>
          <li>Golden Retriever.</li>
          <li>Australian Shepherd.</li>
          <li>Pitbull.</li>
        </ol>
        <class="btn">
<section >
        <div class="level">Medium-Sized Dogs</div>
        <h3>$200</h3>
        <ol>
          <li>Rescued Mutts.</li>
         <li>Polish Lowland Sheepdog.</li>
          <li>Belgian Tervuren.</li>
        </ol>
        <button class="btn"> submit</button>
  </section>
        </div>
      </section>
  <section>
        </section>
      </div>
<input>
      <div class="product">
        <div class="level">Small-Sized Dogs</div>
        <h3>$300</h3>
        <ol>
          <li>Rescued Mutts.</li>
         <li>Maltese dog.</li>
          <li>Chihuahua.</li>
        </ol>
         <button class="btn" id="submit"> submit </button> 
</div>

The most recent version of the code is showing many more errors:

Like the &lt; and the nav ""id""


<form id="form" action="https://www.freecodecamp.com/email-submit"/>
&lt;header ""id""=header header-img/&gt; <b>Cute Dogs</b> 
    <nav id="nav-bar"/>

  &lt;nav ""id""= "nav-bar" header-img/&gt;
      <img id="image" src="https://imagesvc.meredithcorp.io/v3/mm/image?"        url="https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F37%2F2020%2F09%2F22%2F50-cute-dog-names.jpg" alt="cute dog">
1 Like
7

You should consider writing in a “Section by Section” Format.
And verify that everything is working, before you move to the next section.

Ie. Header/ Nav first… make sure the code works, then move on to the next section. etc.

This leaves less room for Error, and allows others to help you make the proper decisions, regarding the code.

1 Like
8

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