Skip to content
Submitted over 1 year ago

I'm just using html and css only, looking forward for good practice

Romanarabe•20
@Romanarabe
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

please rate my coding to improve my html and css ty,

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    HTML 🏷️:

    • This solution generates accessibility error reports due to non-semantic markup
    • So fix it by wrapping the whole content of <div class="main-content"> the with semantic element <main> in your index.html file to improve accessibility and organization of your page.
    • What is meant by landmark elements ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>
    • They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

    I hope you find it helpful ! 😄 Above all, the solution you submitted is great

    Happy coding!

    Marked as helpful
    0
    Romanarabe•20
    @RomanarabePosted over 1 year ago

    @0xAbdulKhalid Thank you so much, This will improve my knowledge, I will fix my code bro, :)

    0
  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hey there ! 👋 Congratulations you finished the product preview card component...🎉

    • some suggestions for you improve your code

    Html 🏷️:

    • for Accessibility reports you using the and div tag to wrap the whole html code and put attribute role="main" is correct way 🎯 and using the header tag those all are problem to occur the Accessibility reports for example...
    <body>
<div class="container" role="main">

//Whole html code

<h1> </h1>
<h2> </h2>
<h3> </h3>
//by ordering using the header tag

</div>
</body>
    • In CSS 🎨:
    • the result summary card the not center aligning because you not using the felx center and height width in body section etc.. so the reason error occurred the project for example
    body {
display : flex;
align-items: center;
justify-content : center;
height : 100vh
max-width : 100%;
overflow-x : hidden;
}
    • I Hope it's useful for you and wating for your next project ❤️
    • Happy Coding 😃
    Marked as helpful
    0
    Romanarabe•20
    @RomanarabePosted over 1 year ago

    @0xAbdul highly appreciate this bro, thank you so much I will apply this code and more practice to improve my coding :)

    0
  • Romanarabe•20
    @RomanarabePosted over 1 year ago

    Please help me what wrong with my code Thank you

    0

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