Skip to content
Submitted over 1 year ago

Responsive product card using cube css

Hanane Boukhalfa•40
@Hanane05
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello guys! I' m open to any critics or suggestions. I'm sure they would be helpful for me. I'm seeking to improve my coding skills, I'm still a newbie. Thank you all :)

Community feedback

  • _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    Hello Coder 👋.

    Congratulations on successfully completing the challenge! 🎉

    Few suggestion regarding accessibility

    Your HTML is a little off. It should be like this

    <body>
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>
</body>

    or alternatively

    <body>
<div class="container" role="main">
/html code goes here: 📃
</div>
</body>

    I hope you find this helpful.

    Happy coding😄

    Marked as helpful
    1
    Hanane Boukhalfa•40
    @Hanane05Posted over 1 year ago

    Thank you for your feedback, I understand your point of view, but I think it's ok to use <img> inside a header, a header doesn't necessarily contain a nav. And for the footer, we can have many; I mean, we can divide the card into parts as I did : header, section, and footer (the footer of the card and not the whole page). Thank you again for your feedback, and I'm looking to receive more from you so we can learn and improve our coding skills :) @NehalSahu8055

    1
    _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    @Hanane05 Yes, you can use img inside header, obviously if there is a navbar then use <nav>, all content except header and footer goes in <main> that's the semantic rule.

    0
    _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    @Hanane05 Yes, you can use img inside header, obviously if there is a navbar then use <nav>, all content except header and footer goes in <main> that's the semantic rule.

    Marked as helpful
    1
    Hanane Boukhalfa•40
    @Hanane05Posted over 1 year ago

    Thank you nehal, I 'll make the necessary changes, :) Thanks again, and I'll be more than happy to receive your feedbacks for the next challenges @NehalSahu8055

    0
    _nehal💎•6,710
    @NehalSahu8055Posted over 1 year ago

    Sure, will be happy to help.

    Tip : Don't forget to generate new screenshots after making the necessary changes.

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord