QR code card component using CSS

Community feedback

• 

  Chris Andrews•170

  @ChrisAndrewsDevPosted over 2 years ago

  Hey @isayaexavery, nice work on your first challenge!

  There's a few small HTML warnings that are easy to remedy:

  • Using semantic landmark HTML tags <main> <section> in place of standard <div> tags to divide sections is best practice and helps with accessibility for screen-readers.
  • You typically want to start with an <h1> on a page and work your way down to smaller headings for less vital content: <h1> to <h2> to <h3> and so on.

  One small thing I noticed when compared to the design brief is that your paragraph should be text-align: center

  You should definitely look into custom CSS variables if you're working with vanilla CSS, especially when doing the challenges here, they make life so much easier when working from a design brief!

  Other than that, your CSS was solid, I could see you experimented with some styles and methods to get a preferred outcome, there are a couple of smaller tweaks I would have made, but you're on the right track for sure!

  Nice one!

  Marked as helpful

  0

  ---

  

  isayaexavery•10

  @isayaexaveryPosted over 2 years ago

  @ChrisAndrewsDev This is very very helpful comment, thank you so much

  1
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Isayaexavery, congratulations for you challenge solution!

  I just saw your live site and I've some tips for you about the design and the elements.

  1.The container text should be aligned to center not to left, use text-align: center;. 2.The H1 font-size is a little bit bigger, you can also switch from h3 to h1. 3.The border-radius for the qrcode image is a little bit different for the container border-radius due some design proportions the inner border-radius should be ever a little bit smaller from the outer content.

  I wrote you the code fixes below:

      text-align: center;
      width: 32rem;
      margin: 10rem auto;
      padding: 2.4rem 0;
      display: flex;
      /* justify-content: center; */
      /* align-items: center; */
      flex-direction: column;
      gap: 2rem;
      background-color: hsl(0, 0%, 100%);
      border-radius: 12px;
  }
  
  .card-content h3 {
      font-size: 2.25rem;
      color: hsl(218, 44%, 22%);
  }
  
  .card-img {
      border-radius: 10px;
  }
  
  

  Hope it helps you, happy coding bro!

  Marked as helpful

  0

  ---

  

  isayaexavery•10

  @isayaexaveryPosted over 2 years ago

  @correlucas

  Thank you for the helpful comment and I will take it to my knowledge in the next project

  0