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 Preview Card Component using flexbox

Elysson Tanaka• 90

@elyssontanaka

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


Hi guys!! This is my first challenge, I would appreciate any comments or suggestions to help improve the quality of my code or on any mistakes you find, especially on the responsiveness part.

Thanks!

Community feedback

Omar M.• 270

@OmarMAttia7

Posted

Congratulations on finishing the challenge 🎉. Good job! I have some feedback on your solution.

First I would like to point out that your usage of the <section> element is a little confusing, you should use a <div> for styling purposes. Check this page for information on how to use it correctly.

Second thing I noticed is that you're way too focused on getting the design pixel perfect, you should be more focused on things like layout and accessibility, how would your component work when put in the same space with other similar components?, will it work correctly if put in another document with other content?, will it resize correctly if a visually impaired user increased the font size?, If someone is using a screen reader will they be able to navigate it correctly?.

By focusing too much on getting the design perfectly you are missing on other important things.

I suggest using flex to center things on the page instead of position: absolute and using ems instead of pixels for starters.

As for responsiveness, you worked on the desktop and large screens first and then made appropriate media queries for mobile and other smaller screens, that works fine most of the time. but you usually want to work with a mobile-first workflow where you make sure your code is working correctly on smaller screens and then expanding from there as it gives you more freedom and takes much less effort, check this article for more information on the subject.

Marked as helpful

1

Elysson Tanaka• 90

@elyssontanaka

Posted

@hazel79 I'll definitely take your tips in consideration when building the next project or refactoring this one. This was of great help to me! Thank you Omar!!

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