nft-preview-card-component using flex

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted over 1 year ago

  Hi, @rsacharias. That's a good solution. Keep coding. Here are some important tips.

  1 - You have to use some resets to fully control the box model. Use this ruleset for this basically:

  *, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  

  You will find many other good CSS resets on the internet, such as joshwcomeau's and Andy Bell's

  2 - You don't need to declare any values for the width property of your elements. You can use max-width instead of width.

  3 - You can use vertical-align: middle; to align your elements vertically. For example:

  .assets .icon {
    vertical-align: middle;
  }
  

  Sometimes, we use so much flex properties for our elements. It's totally normal. To keep it simple this status, we can create some flex classes and we use these styles from HTML as a class. You will see some classes in HTML flex, flex-col- flex-row etc. You can try this style when you are considering using that much flex for your elements.

  I hope these will help you. Keep coding and have a wonderful day.

  Marked as helpful

  1

  ---

  

  rsacharias•20

  @rsachariasPosted over 1 year ago

  @adonmez04: Wow, thanks a lot for the tips. This is really helpful.

  1

  

  P

  Alper•1,010

  @adonmez04Posted over 1 year ago

  @rsacharias You're welcome. To understand the box model in CSS, I highly recommend checking out these resources:

  https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

  https://www.youtube.com/watch?v=WlGQdgy-M6w

  Marked as helpful

  1

  

  rsacharias•20

  @rsachariasPosted about 1 year ago

  @adonmez04 I applied your suggestions. I used some of the css reset rulesets. The resources are really helpful. I understand now why you may want to set the border-box property to box-sizing and eliminate all paddings and margins in the first place.

  Additionally I followed the guideline from Mozilla for organizing CSS code. I think I stick to that for a while.

  And finally, to use flex-col and flex-row classes is a nice tip as well. I will keep that in mind.

  I updated the code just in case you wanna look into that again. But, please, don't feel obliged to do so.

  A big thanks for all the good tips and resources. It really helped me a lot. Have a nice day.

  1
• 

  P

  Alper•1,010

  @adonmez04Posted about 1 year ago

  @rsacharias Organizing your CSS It looks like a good resource, I have been trying to find something like this for a long time, thanks.

  I checked your code and it looks more legible and consistent now. That's an improvement. We won't get our perfect code the first time. We need to improve our code with each version of the solution. Step by step, at some point, we'll have our perfect code.

  I highly recommend solving your challenges over and over again. You can create a new repo and give it a new version name like v2.0 etc. That way, you can compare your first version with the latest version of the project. And you'll see your process clearly.

  Another thing is this ruleset:

  html {
    font-size: 16px;
  }
  

  You don't need to declare this. The font-size is equal to the browser's default (and it's mostly 16px, but it's a computed value, not a present value), and it can be set by the user. If you declare 16px in CSS, you break this HTML behavior. Allow the browser to set this value to the user's preference.

  Keep coding and have a wonderful day.

  0