Product Landing Page using the Grid Layout

I made a Product Landing Page using the Grid layout. But I didn’t figure out how to make cards with photos and text on grids. So I had to add a Flexbox in item “Price”.
I have doubts about the navigation bar. Is it acceptable that the panel is made on grids and doesn’t have a nav element? (I’m not talking about Userstory, which cannot be completely passed with such a code).
Any criticism is welcome. Thanks.

Hi @n0vum. Short answer, yes, it’s acceptable. But if you’re going for FCC’s certification then you want to have all user stories passing. You can always expand your portfolio to show projects that you’ve done that have a different spin on them. That is, project that have nothing to do with FCC.
That being said, your page here passes 12/16 user stories.
Some things to revisit;

  • Run your HTML code through the W3C validator. Just copy your HTML and paste it into the ‘Validate by Direct Input’ tab.
    • Ignore the first few errors since you don’t have those elements because of codepen but, there’s a few other things you can clean up. Some are warnings, some are errors. The warnings are about things such as semantics and how a browser renders things and how accessible your page is. It’s a good practice to do away with the warnings as much as cleaning up the errors.
  • In your footer you have a small typo, target="blanck_". You’ve done it correctly everywhere else you used it.
  • We don’t have access to your google acc’t so we don’t see your images. Maybe host them on GitHub.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for HTML isn’t good. That’s why I recommend W3C but for CSS it’s okay. You have a duplicate in your card class that affects how your page is displayed and for maintenance purposes could cause you a problem.
      Nice job on your page!
1 Like

Thank you very much! You really helped me!

1 Like

Wow, I really liked your use of fonts and icons, to me they’re the ones that make your page look professional.

The position of your navigation buttons is also nice in general, although they may seem a bit too many from a UI/UX standpoint. Since your page is not that long to need that may buttons.

Good job and good luck on your future projects!

1 Like

Many thanks! It’s an inspiring comment :slight_smile:

1 Like