Everything seem to be fine but still i do not pass the test!

1

I am taking the Responsive Web Design Projects - Build a Product Landing Page test . All my codes seem to be fine but still i get back these three points as a failure.

failure 1
failure 11498×810 240 KB
failure 2 and 3
failure 2 and 31460×903 235 KB

my codes for each sections are :
THE NAV LINKS every href is set to the right section and they work totaly fine on the website !!

 <nav id="nav-bar">
            <ul>
                <li class="nav-link"><a href="#about"> ABOUT US </a></li>
                <li class="nav-link"><a href="#service"> SERVICES </a></li>
                <li class="nav-link"><a href="#contact"> CONTACT </a></li>
            </ul>
        </nav>

MEDIA QUEIRES are also fine and working with no problem !!!

@media (max-width: 800px) {
    body {
        background-color: black;
    }
    .pic {
        display: none;
    }
}

FLEXBOX is also working with no problem !!

#contact {
    display: flex;
    flex-direction: row;
    color: snow;
    font-size: 30px;
}

#contact div {
    margin: 10px;
    padding: 20px;
    border: 3px solid darkorange;
    border-radius: 35px;
}

Everything seems to be completly fine , but i still get those three tests as a failure ! i do not understand what is wrong ?

2

Hello there.

I have moved this post into a more suitable subforum.

Would you mind posting a link to your project? CodePen or otherwise?

3

No i do not mind it really ! but i am writing my code in VS CODE and the project is on my local server ( i mean it just a file which i open it with CHROME) ! would a link for it still work out ?

4

It would help if you did one of the following:

  1. Provided the amount of code is not too much. Post it here in the forum using the appropriate syntax.
  2. Create a codepen.io and share the link. This would be the easiest for us to help.

Also, you will have to have your project hosted somewhere (on the internet, publicly available) for you to submit the project in freeCodeCamp. Most users use CodePen for this.

Some things to note when using CodePen:

  1. CodePen does not expect any content outwith the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. If your project uses React, use the Babel preprocessor, and link the CDN in the appropriate :gear: section.
  5. The editors offer the ability to format and analyse your code, providing useful information about forgotten closing tags etc.

If you are still confused with how to use CodePen, please read the official documentation.

Hope this helps

1 Like
5

thanks a lot for all those infos . I will consider your suggestions and try them out. I really appreciate it and thanks a lot .

6

@Sky020 thanks for your suggestions almost all somehow worked. Like you said the submiting problem and also the Flex box problem were solved .

Now i still have the one about nav links . It keeps saying its not correct. Even though the links are working fine !!

I will paste my Pen link down here please if you dont mind go and check it out for me. In my eyes everything seems to be correct ! but still i do not pass the test.

https://codepen.io/Dani-997/pen/JjYbQBy

7

Excellent. Thank you, for doing that.

Here is the issue:

Each .nav-link element should have an href attribute

This is what you have:

<li class="nav-link"><a href="#about"> ABOUT US </a></li>

Click for answer, if you cannot figure it out:

Your a elements need a class of nav-link not the li element.

Hope this helps

1 Like
8

It did work :slight_smile: :slight_smile: thanks a lot for your help . I really appreciate it .

9

The instruction says

When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’

The class nav-link is supposed to be on the element which takes you to corresponding page when clicked for your case is a element not li. So apply the class on ‘a’ element instead. It will require you to change your styling a bit.

  <nav id="nav-bar">
            <ul>
                <li ><a class="nav-link" href="#about"> ABOUT US </a></li>
                <li ><a class="nav-link" href="#service"> SERVICES </a></li>
                <li ><a  class="nav-link" href="#contact"> CONTACT </a></li>
            </ul>
        </nav>
2 Likes
10

Thank you i solved it :slight_smile: