Landing-page Project

HTML-CSS
#1

Hi,
I have done the landing page project, but i am getting the error below when i parse my code through the testing template.

5. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.'
Each .nav-link element should have an href attribute : expected false to equal true
AssertionError: Each .nav-link element should have an href attribute : expected false to equal true
    at Proxy.c (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:549:1889)
    at Proxy.l (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:431:130)
    at Function.n.strictEqual (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:574:655)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:137905
    at NodeList.forEach (<anonymous>)
    at a.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:657:137853)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38668
    at i.g.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:38963)
    at N.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:45686)
    at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:598:46651

I had previously created bare links as list items in the nav element that take the user to a section of the webpage. Afterward, i created buttons and hyperlinked them. Though it works, I am still getting an error.

Here is my source code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- fav-icon -->

    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">

    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">

    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">

    <link rel="manifest" href="site.webmanifest">

    <link rel="stylesheet" href="style.css">

    <title> Honey </title>

</head>

<body>

    <header id="header">

        <div class="hdr-img-container">

            <img src="../Product-landing-page/gallery/logo.png" alt="company logo" id="header-img" width="40" height="40">

        </div>

        <h1> Arsalley </h1>

        <nav id="nav-bar">

            <ul id="nav-links">

                <li> <a href="#products"> <button class="nav-link"> Products </button> </a> </li>

                <li> <a href="#gallery"> <button class="nav-link"> Gallery </button> </a> </li>

                <li> <a href="#pricing"> <button class="nav-link"> Pricing </button> </a> </li>

            </ul>

        </nav>

    </header>

    <main>

        <section id="products">

            <h2> Our Products </h2>

            <div class="product-card">

                <div class="prdct-img-container"> <img src="../Product-landing-page/gallery/honey.jpg" alt="honey" class="prdct-img"> </div>

                <p class="prdct-description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet cupiditate nisi, ullam fuga itaque magnam quam omnis voluptas a rem. Assumenda earum molestiae nam ducimus incidunt adipisci quis nulla fuga. </p>

            </div>

            <div class="product-card">

                <div class="prdct-img-container"> <img src="../Product-landing-page/gallery/honey-jar.jpg" alt="honey jar" class="prdct-img"> </div>

                <p class="prdct-description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet cupiditate nisi, ullam fuga itaque magnam quam omnis voluptas a rem. Assumenda earum molestiae nam ducimus incidunt adipisci quis nulla fuga. </p>

            </div>

            <div class="product-card">

                <div class="prdct-img-container"> <img src="../Product-landing-page/gallery/honey-dipper.jpg" alt="honey dipper" class="prdct-img"> </div>

                <p class="prdct-description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet cupiditate nisi, ullam fuga itaque magnam quam omnis voluptas a rem. Assumenda earum molestiae nam ducimus incidunt adipisci quis nulla fuga. </p>

            </div>

            <form action="https://www.freecodecamp.com/email-submit" id="form">

                <label for="email"> Want to be the first to know when we have offers? Enter your email below. </label>

                <input type="email" name="email" id="email" placeholder="Email" required> 

                <input id="submit" type="submit" value="Submit">

            </form>

        </section>

        <section id="gallery">

            <h2> Gallery </h2>

            <div class="vid-container">

                <video id="video" controls>

                    <source src="../Product-landing-page/gallery/video.mp4" type="video/mp4">

                    Sorry, your browser doesn't support embedded videos.

                </video>

            </div>

        </section>

        <section id="pricing">

            <h2> Our Prices </h2>

            <div id="prices">

                <div class="price-card">

                    <div class="prdct-img-container"> <img src="../Product-landing-page/gallery/honey.jpg" alt="honey" class="prdct-img"> </div>

                    <p class="prdct-name"> Honey </p>

                    <p class="prdct-price"> Kshs 300/ Kg </p>

                </div>

                <div class="price-card">

                    <div class="prdct-img-container"> <img src="../Product-landing-page/gallery/honey-jar.jpg" alt="honey jar" class="prdct-img"> </div>

                    <p class="prdct-name"> Storage </p>

                    <p class="prdct-price"> from Kshs 100 - 300 </p>

                </div>

                <div class="price-card">

                    <div class="prdct-img-container"> <img src="../Product-landing-page/gallery/honey-dipplastic.jpg" alt="honey dipper" class="prdct-img"> </div>

                    <p class="prdct-name"> Honey dippers </p>

                    <p class="prdct-price"> Kshs 150 - 250 </p>

                </div>

            </div>

        </section>

    </main>

    <footer id="footer">

        <p class="footer-details">

            Wairua &#169; 

        </p>

    </footer>

</body>

</html>

Kindly help me debug the problem.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36.


**Challenge:** Build a Product Landing Page

**Link to the challenge:**
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page
#2

your .nav-links are good. The problem is you have not put up anchor points inside the document where those links lead to when clicked.
Consider this:

<a href="#bottom">Click here to go to the bottom of the page</a>

<p> 
some content here
</p>

<!--- this is the place where above links leads to --->
<a id="bottom">You are at bottom</a>
<....>

Pay close attention to the id attribute value.

1 Like
#3

It doesn’t seem it has a href attribute

1 Like
#4

@hiro and @ilenia
I tried your solutions, but they didn’t work. Though, they led me to find the solution. i appreciate your responses.
i found the solution; i removed the button elements (since buttons and anchor tags should not be descendants of each other) and worked with anchor tags only. I put all the attributes in the ‘clickable’ anchor tags.
Here is the solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- fav-icon -->
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
    <link rel="manifest" href="site.webmanifest">

    <link rel="stylesheet" href="style.css">

    <title> Honey </title>
</head>

<body>

    <header id="header">
        <div class="hdr-img-container">
            <img src="../Product-landing-page/gallery/logo.png" alt="company logo" id="header-img" width="40" height="40">
        </div>
        <h1> Arsalley </h1>
        <nav id="nav-bar">
            <ul id="nav-links">
                <li> <a class="nav-link" href="#products"> Products </a> </li>
                <li> <a class="nav-link" href="#gallery"> Gallery </a> </li>
                <li> <a class="nav-link" href="#pricing"> Pricing </a> </li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="products">
            <h2> Our Products </h2>
            <div class="product-card">
                <div class="prdct-img-container"> <img src="../Product-landing-page/gallery/honey.jpg" alt="honey" class="prdct-img"> </div>
                <p class="prdct-description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet cupiditate nisi, ullam fuga itaque magnam quam omnis voluptas a rem. Assumenda earum molestiae nam ducimus incidunt adipisci quis nulla fuga. </p>
            </div>
            <div class="product-card">
                <div class="prdct-img-container"> <img src="../Product-landing-page/gallery/honey-jar.jpg" alt="honey jar" class="prdct-img"> </div>
                <p class="prdct-description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet cupiditate nisi, ullam fuga itaque magnam quam omnis voluptas a rem. Assumenda earum molestiae nam ducimus incidunt adipisci quis nulla fuga. </p>
            </div>
            <div class="product-card">
                <div class="prdct-img-container"> <img src="../Product-landing-page/gallery/honey-dipper.jpg" alt="honey dipper" class="prdct-img"> </div>
                <p class="prdct-description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet cupiditate nisi, ullam fuga itaque magnam quam omnis voluptas a rem. Assumenda earum molestiae nam ducimus incidunt adipisci quis nulla fuga. </p>
            </div>
            <form action="https://www.freecodecamp.com/email-submit" id="form">
                <label for="email"> Want to be the first to know when we have offers? Enter your email below. </label>
                <input type="email" name="email" id="email" placeholder="Email" required> 
                <input id="submit" type="submit" value="Submit">
            </form>
        </section>
        <section id="gallery">
            <h2> Gallery </h2>
            <div class="vid-container">
                <video id="video" controls>
                    <source src="../Product-landing-page/gallery/video.mp4" type="video/mp4">
                    Sorry, your browser doesn't support embedded videos.
                </video>
            </div>
        </section>
        <section id="pricing">
            <h2> Our Prices </h2>
            <div id="prices">
                <div class="price-card">
                    <div class="prdct-img-container"> <img src="../Product-landing-page/gallery/honey.jpg" alt="honey" class="prdct-img"> </div>
                    <p class="prdct-name"> Honey </p>
                    <p class="prdct-price"> Kshs 300/ Kg </p>
                </div>
                <div class="price-card">
                    <div class="prdct-img-container"> <img src="../Product-landing-page/gallery/honey-jar.jpg" alt="honey jar" class="prdct-img"> </div>
                    <p class="prdct-name"> Storage </p>
                    <p class="prdct-price"> from Kshs 100 - 300 </p>
                </div>
                <div class="price-card">
                    <div class="prdct-img-container"> <img src="../Product-landing-page/gallery/honey-dipplastic.jpg" alt="honey dipper" class="prdct-img"> </div>
                    <p class="prdct-name"> Honey dippers </p>
                    <p class="prdct-price"> Kshs 150 - 250 </p>
                </div>
            </div>
        </section>
    </main>

    <footer id="footer">
        <p class="footer-details">
            Wairua &#169; 
        </p>
    </footer>
</body>
</html>

Again, thank you @ilenia and @hiro.

1 Like
#5

Sorry, I did not provide a solution, I was pointing out the source of the error

anyway, good job in figuring it out!

1 Like
#6

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