Skip to content
Submitted over 1 year ago

nft card preview using flexbox and container

Franck•180
@SFN98
A solution to the NFT preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

It looks like it is responsive but when i deployed it and ckeck with my phone, i saw that it is not very responsive. what are your practices to see if your project is responsive on all screen? Please check my project and tell me if there's something wrong.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Daniel 🛸•44,790
    @danielmrz-dev

    Hello @SFN98!

    Your solution looks great!

    I have a couple of suggestions (about semantic HTML) for improvement:

    📌 First: Use <main> to wrap the main content instead of <div>.

    Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page.

    📌 Second: Use <h1> for the main title instead of <h2>.

    Unlike what most people think, it's not just about the size and weight of the text.

    • The <h1> to <h6> tags are used to define HTML headings.
    • <h1> defines the most important heading.
    • <h6> defines the least important heading.
    • Only use one <h1> per page - this should represent the main heading/title for the whole page. And don't skip heading levels - start with <h1>, then use <h2>, and so on.

    All these tag changes may have little or any visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

    I hope it helps!

    Other than that, great job!

    Marked as helpful
  • Hassan Moataz•1,860
    @hassanmoaa

    Hello @SFN98 !

    Great Job solving the challenge mate *congrats * 🎉

    Just some suggestions for improvement.

    • Use <main> to wrap the main content instead of <div>.

    📌 Tags like <div> and <span> are typical examples of non-semantic HTML elements. They serve only as content holders but give no indication as to what type of content they contain or what role that content plays on the page. This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

    ➖➖➖➖➖➖

    Heading is defined with <h1> to <h6> tags. It is important to use headings to show the HTML document structure.

    <h1> headings should be used for main headings, followed by <h2> headings, then <h3>, and so on up to <h6>

    Other than that all good!

    Marked as helpful
  • Nikhil Tanwar•260
    @NikNT

    Developers tools are essential. Make the best use of them.

    What I also like to do is spin up a local server, that way you can open you website on different devices. This gives the flexibility to check the live view on different screens.

    Try it out once, maybe you'll be able to build better responsiveness!

  • Levis Kim•1,230
    @Orekihotarou-k

    hey there @SFN98. I just clicked the link to see the live site, and I noticed that the link is broken. Could you look into that? thanks.

  • Kirsti Anja Simonsen•70
    @kirstiAnja

    Your solution looks great! I am using developer tools - Chrome. Also using an extension called Windows resizer and one called Web Developer. But still I am finding it hard to know for sure that this is indeed responsive.

  • Manuel Salazar•330
    @Norwyx

    When developing, use developer tools and keep a constant check of how the project is responding at certain breakpoints. Also, try to always develop mobile-first.

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