QR code component using basic HTML and CSS

Community feedback

• 

  Kawsar Ahmed Fahad•2,660

  @faha1999Posted about 2 years ago

  Hello, aljacly Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

  • You might want to use semantic tags like the <main> to wrap your code, instead of divs. like

  <main class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  </main>
  

  This would help improve accessibility.

  • add the below code to the body. It will center everything

  body {
      justify-content: center;
      align-items: center;
      display: flex;
      height: 100vh;
      flex-direction: column;
  }
  

  • remove the below styles from the .border

  .border {
      /* width: 200px; */
      /* height: 200px; */
      /* display: block; */
      /* margin-left: auto; */
      /* margin-right: auto;*/
      /* margin-top: 250px;*/
  }
  

  • remove the below styles from the .caption

  .caption{
      /* top: 48%;*/
     /*height: 200px;*/
      margin-top: 5rem;
  }
  

  • in .caption2 the top: 40% & text-align: center;

  • this is my solution live, repo

  I hope it will work. Happy coding.

  Marked as helpful

  2

  ---

  

  aljacly•20

  @aljaclyPosted about 2 years ago

  @faha1999 Thanks very much for the tips and for sharing your solution! I appreciate the breakdown of the code.

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hi @aljacly congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  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:

  This article explain why is better to use rem over px :Some people, for example, need to zoom maybe up to 400% to be able to read your text, due to a visual impairment. Using REM you make sure that your text respects these needs, because the font-size is defined relative to the default font-size a user has chosen. https://www.freecodecamp.org/news/what-is-rem-in-css/#:~:text=Using%20REM%20(or%20another%20relative,due%20to%20a%20visual%20impairment.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  aljacly•20

  @aljaclyPosted about 2 years ago

  @correlucas thank you for the help! was exactly what I was looking for.

  0
• 

  Funsho Ayobanjo•150

  @ayobanjoPosted about 2 years ago

  Hello Aljacly, I just submitted this myself, few observations though #CSS

  1. You should create a CSS file to make your HTML file cleaner
  2. You should use flex on your body tag to centre its children(main or the div containing the code)
  3. The div class border is breaking the code. You should remove it once the flex is added

  #HTML

  1. Your text should be in a paragraph tag, or heading tag, not in a div

  Hopefully, I have been of help. Still a lot to be done though

  Marked as helpful

  1

  ---

  

  aljacly•20

  @aljaclyPosted about 2 years ago

  @ayobanjo Thanks so much for your help! I haven't used flex before, so will look into that.

  0