Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

nft card preview using flexbox and container

Franck 180

@SFN98

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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.

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

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

@SFN98

Posted

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

1
Hassan Moataz 1,860

@hassanmoaa

Posted

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

@SFN98

Posted

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

0

@NikNT

Posted

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

@SFN98

Posted

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

0

@NikNT

Posted

@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

@SFN98

Posted

@NikNT good, i follow you

0
Levis Kim 1,180

@Orekihotarou-k

Posted

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

@SFN98

Posted

@Orekihotarou-k Sorry, you can check now.

0
Levis Kim 1,180

@Orekihotarou-k

Posted

@SFN98 kay, it works now

0

@kirstiAnja

Posted

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

@SFN98

Posted

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

0

@Norwyx

Posted

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

@SFN98

Posted

@Norwyx alright, thanks

0

Please log in to post a comment

Log in with GitHub
Discord logo

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