Need feedback for Product landing page project

Code Feedback
1

I used w3 validator to check my webpage and got errors below. I tried to search for solution online but it seems like they are minor and mainly caused by validator itself.

pro3
pro31667Ă—589 210 KB

  1. Other than that, when I was coding the CSS of the body element, I do not understand why the font-family feature also applied to the header and footer section as well.

  2. I have seen other people setting different rules for their media query codes( like they use different max width or max height, etc). Is there any standard to follow as I have been resizing the browser to see if my CSS looked good to me…

  3. I found that I am new to flex box and grid. I wonder if it is necessary to apply flex-box features to the “features” element in order to be centered on horizontal and vertical axises? (As I have applied have made body element(parent element of the “features” element) to be centered on horizontal and vertical axises.)

1 Like
2

Hello @gvghk1. Welcome to the forums.

  • Can you please give the link to the validator errors? Debugging it by seeing an image is quite hard.

  • Whenever you do CSS styling for the body element, it will be applied to every child elements. For example, try setting the color: red; in the body tag’s CSS itself and notice that every text’s color is changed to red (if any element has an individual color already set, it won’t be applied. So, if you want your header’s text to be of another font, you need to add it to the header’s link elements separately. That will override the font-family set in the body tag.

  • The reason many people use different max-width and max-height is because every device’s screen size differs. For example, an iPhone’s screen size is not the same as Samsung device’s screen size. So, you need to look at your project’s audience and check what type of device they use most times. Also, if you want to style for all mobile devices, you can specify the max-width value to 600px;.
    Also, if you are confused about whether to use max-width or min-width, you need to look at the definition of it. For example, if you set the max-width to 600px, the CSS rules specified in that media query will only be applicable to devices lower than 600px . If you se min-width instead, the CSS rules will only be applicable to devices greater than 600px..
    If you need to find standard device widths and learn more about media queries, check this link:

  • You can use flexbox or grid to create cards like that as it’s easy to do it with them. But, I think the features section you have right now is enough.

Hope this helps.

1 Like
3

I think the w3c validators cannot generate a link… I put the codes below but it wont show line number…

    <html lang="en">↩
      <head>↩
        <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>↩
    ↩
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">↩
    ↩
        <link↩
          rel="stylesheet"↩
          href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"↩
          integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"↩
          crossorigin="anonymous"↩
        />↩
        <title>CHL cloud</title>↩
      </head>↩
    ↩
    ↩
        <header id="header">↩
          <img id="header-img" src="https://images.unsplash.com/photo-1594543323256-44c1dbfc1f2e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2000&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ" alt="Company logo">↩
          <nav id="nav-bar">↩
            <ul>↩
              <li><a class="nav-link" href="#features">Features</a></li>↩
              <li><a class="nav-link" href="#how-it-works">How It Works</a></li>↩
              <li><a class="nav-link" href="#plans">Plans</a></li>↩
            </ul>↩
          </nav>↩
        </header>↩
          <body>↩
            <section id="features">↩
              <div id="feature1">↩
                <div class="heading">↩
                  <i class="fas fa-drafting-compass"></i><h2> Faster Deployment</h2>↩
                </div>↩
                <p>Deploy your processes in a faster and efficent way.</p>↩
              </div>↩
              ↩
              <div id="feature2">↩
                <div class="heading">↩
                  <i class="fa fa-mouse-pointer"></i><h2>Easy Handling</h2>↩
              </div>↩
                <p>Handle your processes with a few clicks.</p>↩
              </div>↩
              ↩
              <div id="feature3">↩
                <div class="heading">↩
                  <i class="fas fa-satellite-dish"></i><h2>Keep in touch</h2>↩
                </div>↩
                <p>Contact your clients in a same interface thru e-mail or online phone call.</p>↩
              </div>↩
            </section>↩
    ↩
            <section id="how-it-works">↩
               <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/oHxxFC6nQiY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>↩
            </section>↩
    ↩
        <h2>Select your plan today: </h2>↩
         <section id="plans">↩
              <div class="product" id="tenor">↩
                <div class="level">Tenor Trombone</div>↩
                <h2>$600</h2>↩
                <ol>↩
                  <li>Lorem ipsum.</li>↩
                  <li>Lorem ipsum.</li>↩
                  <li>Lorem ipsum dolor.</li>↩
                  <li>Lorem ipsum.</li>↩
                </ol>↩
                <button class="btn">Select</button>↩
              </div>↩
              <div class="product" id="bass">↩
                <div class="level">Bass Trombone</div>↩
                <h2>$900</h2>↩
                <ol>↩
                  <li>Lorem ipsum.</li>↩
                  <li>Lorem ipsum.</li>↩
                  <li>Lorem ipsum dolor.</li>↩
                  <li>Lorem ipsum.</li>↩
                </ol>↩
                <button class="btn">Select</button>↩
              </div>↩
              <div class="product" id="valve">↩
                <div class="level">Valve Trombone</div>↩
                <h2>$1200</h2>↩
                <ol>↩
                  <li>Plays similar to a Trumpet</li>↩
                  <li>Great for Jazz Bands</li>↩
                  <li>Lorem ipsum dolor.</li>↩
                  <li>Lorem ipsum.</li>↩
                </ol>↩
                <button class="btn">Select</button>↩
              </div>↩
          </section>↩
        <section id="hero">↩
          <h2>Contact us for further information.</h2>↩
          <form id="form" action="https://www.freecodecamp.com/email-submit">↩
            <input↩
              name="email"↩
              id="email"↩
              type="email"↩
              placeholder="Enter your email address"↩
              required↩
            />↩
            <input id="submit" type="submit" value="Get Started" class="btn" />↩
          </form>↩
        </section>↩
          </body>↩
        <hr>↩
            <footer>↩
            <ul>↩
              <li><a href="#">Privacy</a></li>↩
              <li><a href="#">Terms</a></li>↩
              <li><a href="#">Contact</a></li>↩
            </ul>↩
            <span>Original, CHL cloud, 2020.</span>↩
          </footer>↩
    </html>
1 Like
4

Thanks for the advice first.

I mean the “features section” is the child section of the body section. I first tried to applied the center alignments effects(vertically and horizontally) to the body section but it did not align the “features section”, so I had to apply flex-box effects to the “features section”.

1 Like
5

How did you use the validator? I mean, did you paste your code there or gave the codepen url? If you did by giving codepen url, then try submitting your code to the validator by the “Direct Input” method.

6

Actually I tried both ways. If I copy the html codefrom code pen and use direct input, it will give me this link below which will not show the result…

https://validator.w3.org/nu/#textarea

1 Like
7

I think you paste your code in the wrong place. Try this link: