Nft preview card using CSS grid

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @Grimjow-immortal, great job on this project!

  Some suggestions to improve you code:

  1. For accessibility purposes, its better to use rem/em instead of px for your CSS property values.

  2. To help keep your CSS code organized and easier to use, I suggest implementing CSS Variables. This will come in handy when building large websites, using light/dark mode, etc…

  It’ll look something like this:

  :root {
    --primary-color: value;
    --secondary-color: value;
    --tertiary-color: value;
  }
  

  And to use the variables you’ll use the var() function. So it’ll look like this.

  h1 {
  color: var(—primary-color);
  }
  

  Heres are some articles regarding CSS Variables.

  You can also take a look at my projects and see how I use it.

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

  https://www.w3schools.com/css/css3_variables.asp

  Happy Coding!

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Grimjow-immortal, Congratulations on completing this challenge!

  Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  Fix the component responsiveness, its not working yet and this is due the fixed width you've applied to the container. The difference between width and max-width is that the first(width) is fixed and the second(max-width) is flexible and make the element shrink when the screen starts to scale down. So if you want a responsive block element, never use width choose or min-width or max-width.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Grimjow-immortal•20

  @Grimjow-immortalPosted about 2 years ago

  @correlucas i am still having difficulty trying to understand width, max or min width, height, max or min height and viewport. please can you elaborate more on that

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @Grimjow-immortal,

  Congrats on completing the challenge

  You can center the card with flexbox, replace your body rule with the one below.

  body {
      background-color: hsl(217, 54%, 11%);
      font-size: 18px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  Hope this is helpful.

  Marked as helpful

  0