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

mobile first using HTML and CSS

@Git-Lux

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


My second challenge on this site. Hope I did good. Please leave feedback and tips. Thank you fellow devs :)

Community feedback

radriann• 150

@radriann

Posted

Very well done! Some recommendations would be to add alternative text to images in more descriptive ways, this has to do with accessibility.

Also take into account the semantic HTML, that is, tags such as figure, main, etc.

Keep it up, have a nice day ^-^

Marked as helpful

1
Abdul• 8,560

@Samadeen

Posted

Great Work Mate.. Nice Attempt Challenge also.. I'd suggest you use <main class="container"> instead of <div class="container">.. Secondly to add an alternative text to your images for screen readers. Overrall You did nicely.. Cheers Mate

Marked as helpful

1
Shahin NJ• 1,190

@SJ-Nosrat

Posted

Hi Luka, Awesome job on this challenge. The page responds perfectly between mobile-view right up to desktop sizes. I was looking at the Accessibility Issues generated by the report, find below some tips:

  1. Try and change the <div class="container"> to <main class="container">;
  2. You can use the <figure>tag instead of the <article> tag since you're wrapping <img> (images);
  3. Wrapping the <h1> tag in a <header> tag would be useful to screen-readers.

The above tips follows Semantic HTML, since we're trying to give meaning to how we section off our content: you can read more about it here.

Best of luck on your journey! You're doing great!

Marked as helpful

1

@Git-Lux

Posted

@SJ-Nosrat thank you for taking the time to review and give feedback, really appreciate it :)

1

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