NFT Preview Card Component

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Michelle, well done completing this, and happy to hear that you loved the challenge 🙂

  I think you did a lot of things well here, such as being able to center the component. There are a few suggestions I have that can help you even in future projects:

  1. Right now in your CSS, there aren't any reset/normalize rules. You'd always want to add these to every project because every browser has its own default styles, and my browser may be different from yours. There should at least be these few rules in every project, and here are some that I use, taken from Andy Bell's CSS reset:

     // put these at the top of your sheet 
     
     *, *::before, *::after {
       box-sizing: border-box;
     }
     
     * {
       font: inherit;
       margin: 0;
       padding: 0;
     }
     
     img, picture, video, canvas, svg {
       display: block;
       max-width: 100%;
     }
     
     html, body {
       height: 100%;
     }
     

  2. Instead of using a width: 40vh on your card, try something like max-width: 400px instead. The reason for that is, if I shrink the browser down, the height of the browser will affect the width, even if I don't change the browser width. Try doing that and see how it affects your card.

  3. I would remove the margins and padding you have on the image and just increase the padding on your card container instead (probably 1.5rem in desktop view and 1rem in mobile). This will make the padding look more even for the text area and the image; this might only work after you've added in the reset rules because there might be default padding and margin on the elements already, so be sure to add those rules in first before trying this.

  Great work, and keep going! 😊

  Marked as helpful

  0

  ---

  

  Michelle Wangari•50

  @Michelle-WanderiPosted over 2 years ago

  @elaineleung thank you so much Elaine for your feedback. I have learnt a lot and i will make the changes. I appreciate you taking your time to explain it to me.

  1

  

  Michelle Wangari•50

  @Michelle-WanderiPosted over 2 years ago

  @elaineleung this is unrelated to the work but i have seen you implement a lot of sass in your work. How can i get started?

  0

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @Michelle-Wanderi You may be interested in Jessica Chan's YouTube course on Sass here: https://www.youtube.com/watch?v=jfMHA8SqUL4

  It's a free 4-hr course, and while I haven't seen the whole video, for the parts I did see, I think she does a good job explaining a lot of things, not just Sass, but even responsive design and how to use VS Code. She also has other videos where she works on FEM projects, which I think are also worth checking out. Good luck!

  Marked as helpful

  0

  

  Michelle Wangari•50

  @Michelle-WanderiPosted over 2 years ago

  @elaineleung Thank you I will definitely check that up

  0