Creating a QR code card based on a design

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @javina89, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:

  1.Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

  2.The main heading has the tag <,main>, in this case, you should replace it with <h1> since this heading is the main title on this page. Remember that every page should have one <h1> to declare which is the most important title and that you should follow the hierarchy using the heading sequence (h1, h2, h3, h4, h5) and never jump a level.

  3.Add min-height: 100vh to make the vertical alignment:

  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: #d5e1ef;
  }
  

  ✌️ I hope this helps you and happy coding!

  0
• 

  Darionas•320

  @DarionasPosted about 2 years ago

  Hello @javina89, congratulations on your solution! The result look good. You did a good job here. I’ve some suggestions for you:

  1. It is good practice to set Solution URL to provide community members see your code and make feedback for your. It is several ways to do that https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248
  2. Card container is not centered vertically. The one of the way to do this is using flexbox method. It lets center elements horizontally and vertically. Read here: https://www.w3schools.com/howto/howto_css_center-vertical.asp

  I hope this helps you and happy coding!

  0