Nft-Preview_Card-Component (HTML/ CsS)

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted about 2 years ago

  Hey @Teeyana, 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,400

  @correlucasPosted about 2 years ago

  👾Hello @Teeyana, Congratulations on completing this challenge!

  👨‍💻 Here are some tips to improve your solution code:

  The approach you've used to center this card vertically is not the best way, because using margins you don't have much control over the component when it scales. My suggestion is that you do this alignment with flexbox using the body as a reference for the container.

  The first thing you need to do is to remove the margins used to align it, then apply min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body with display: flex and align-items: center / justify-items: center. If you're using the attribution you need to add flex-direction: column to make the attribution stays under the QR Code component. See the code below:

  body {
      display: flex;
      min-height: 100vh;
      box-sizing: border-box;
      /* width: 100vw; */
      /* height: 100vh; */
      overflow: hidden;
      background-color: #17395f;
      font-family: 'ABeeZee', sans-serif;
      align-items: center;
      justify-content: center;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0