Product landing page : asking feedbacks and issues

Code Feedback
1

Hi there,

I would like to have feedbacks on my product landing page : Bisgrow website

Q: I have issue on my container image and responsive, can you help?
:slight_smile:

2

Welcome to the forums @amandacode. Your page looks good. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>).
    • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 10/16 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue.
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Check that the user has entered a valid email addr. Throw an HTML5 error if not.
    • You learned to do this when you created the survey form.
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • There’s a horizontal scrollbar on smaller screens
2 Likes
3

A few other issues:

  • The input for the email address needs a <label>
  • You should have an h1 heading near the top of the page
  • You should have a <main> wrapping all of your content excluding the header/footer
  • You have Pricing as an h2 and then use h2 again for the products directly under Pricing. Those should be h3’s.
  • Responsiveness also includes changes to text size. As I manually increase the text size, a lot of the layout starts to break. One hint, do not use px to set height, use em instead.
2 Likes
4

Thank you @Roma.

Your indication helped a lot in this process.
I did understand where was the missing and problematic elements and why it didnt worked.
I will now always run my code through W3C

Now the test are great, I need to work on more responsive :slight_smile:

5

Thank you @bbsmooth.
This FCC forum is awesome I will now not hesitate to ask questions anymore.
I updated my html, for the products in h2 it’s a font size purpose only. I think it look more homogeneous :slight_smile:
I need to work on responsive more.