NFT Preview Card Component Using Flexbox

Community feedback

• 

  Zienab Mohammed Abdelmonaem•400

  @zenab12Posted over 2 years ago

  Hey!! Congratulations for completing this challenge.. .

  Here are my suggestions..

  1-Go down orderly when you are using the headings h1 down to h2 down to h3 and so on . so use h1 instead h2 and change font-size if you want .. This should fix most of your accessibility issues

  --------------------------------- And To make code more semantic and readable ----------------------------------

  1- Use <figure> instead <div class="card"> to make code more semantic and understandable for e-reader

  2- to center Card in the page use this code :

  /*it is the container and remove padding in the body flex-box solve all problems*/
  body {margin :0;display:flex;flex-direction:column; min-height:100vh}
  
  /*it is a child and we make flex-grow:1 to distribute space-equally in top and bottom*/
  main{display:flex;place-items:center;place-content:center;flex-grow:1}
  
  /*to make identical css design with  (div.card)or figure you should use box-shadow like this with colors in style-guide but I put colors in variables  */
  :root {
      --main-bg-color: hsl(217, 54%, 11%);
      --card-bg-color: hsl(216, 50%, 16%);
      --dark-blue-line: hsl(215, 32%, 27%);
      --white-color: hsl(0, 0%, 100%);
      --primary-color-soft-blue: hsl(215, 51%, 70%);
      --primary-color-cyan: hsl(178, 100%, 50%);
  }
  figure{box-shadow: 0px 20px 2px 14px var(--dark-shadow), 0px 24px 30px 33px var(--light-shadow)};
  
  /*you can make it in this challenge to get identical design but don't make it in really site you work on as semantic layout should contain header,main,nav,footer,etc. */
  footer{display:none;margin:0}
  
  

  Regardless you did amazing... hope you find this useful... Happy coding and nice day :-)!!!

  0

  ---

  

  Najeeb Anwari•300

  @najeeb-anwariPosted over 2 years ago

  @zenab12 Usually h1 always comes first, but as this is a single component challenge rather than a full web page I think it’s fine to use a h2 like you’re presuming there would be a h1 titling the page anyway if this was on a full web page. Figure definitely wouldn’t be the right thing to use for this card. That is only for content that needs a figcaption. A div is fine. Thanks anyway!

  0
• 

  Mohamed Ehab•350

  @Programming-School-Pro-CodingPosted over 2 years ago

  Very Nice

  0