nft card preview using flexbox and container

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  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

  0

  ---

  

  Franck•180

  @SFN98Posted 10 months ago

  @danielmrz-dev alright, thank you, i'll use them in my next project.

  1
• 

  Hassan Moataz•1,860

  @hassanmoaaPosted 10 months ago

  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

  0

  ---

  

  Franck•180

  @SFN98Posted 10 months ago

  @hassanmoaa thanks for your reply, i will follow your recommandation for the next project.

  0
• 

  Nikhil Tanwar•260

  @NikNTPosted 10 months ago

  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!

  0

  ---

  

  Franck•180

  @SFN98Posted 10 months ago

  @NikNT alrighth i will try it thank you very much.

  0

  

  Nikhil Tanwar•260

  @NikNTPosted 10 months ago

  @SFN98

  Great! You can reach out to me if you want any help or suggestion with your project! I'll always be happy to help out!

  0

  

  Franck•180

  @SFN98Posted 10 months ago

  @NikNT good, i follow you

  0
• 

  Levis Kim•1,200

  @Orekihotarou-kPosted 10 months ago

  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.

  0

  ---

  

  Franck•180

  @SFN98Posted 10 months ago

  @Orekihotarou-k Sorry, you can check now.

  0

  

  Levis Kim•1,200

  @Orekihotarou-kPosted 10 months ago

  @SFN98 kay, it works now

  0
• 

  Kirsti Anja Simonsen•70

  @kirstiAnjaPosted 10 months ago

  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.

  0

  ---

  

  Franck•180

  @SFN98Posted 10 months ago

  @kirstiAnja alright, i'll try to use them to.

  0
• 

  Manuel Salazar•330

  @NorwyxPosted 10 months ago

  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.

  0

  ---

  

  Franck•180

  @SFN98Posted 10 months ago

  @Norwyx alright, thanks

  0