NFT Preview Card Component using flexbox

Community feedback

• 

  Omar M.•270

  @OmarMAttia7Posted over 2 years ago

  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

  @elyssontanakaPosted over 2 years ago

  @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