Responsive QR code componet with HTML and CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉

  Like @Kathund has recommended to you, I suggest moving all the styling into a separate CSS file. This will make thing easier to maintain and obviously make the HTML looks cleaner.

  What is the purpose of <link rel="stylesheet" href="isaac.css">?

  The QR code is an important image so I recommend adding some alternative text like "QR code for frontendmentor.io" would be a good alternative text.

  Also, I recommend removing the initial content. It's only for development purposes so there's no need for it to exist in production.

  The card only needs max-width to be responsive. So, I suggest only setting a max-width and removing the width and the min-height. For the height of the card, let the content inside it control it.

  Lastly, I suggest making the img as block element and setting max-width: 100% to make it easier to work with img element.

  I hope this helps!

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  About updating the solution, I recommend using Git command. This way, all you have to do is the following. It's the same command that GitHub shows to you when you first create the repo.

  git add .
  git commit -m "describe what changes you've made here"
  git remote add origin <url>
  git push -u origin main
  

  This way, next time you make any changes or update the solution all you have to do is the following.

  git add .
  git commit -m "describe the changes that you've made here"
  git push
  

  In Frontend Mentor, all you need to do is to wait until the GitHub page reflects the changes and generate a new screenshot (and generate a new report).

  You read the complete guide on how to submit your solution by reading the official guide about it.

  1
• 

  Abdul•8,540

  @SamadeenPosted over 2 years ago

  Hey!! Cheers 🥂 on completing this challenge.. .

  Here are my suggestions..

  • You should use <main class="card"> instead of <div class="card">.
  • Go down orderly when you are using the headings h1 down to h2 down to h3 and so on.
  • You can wrap your attribution section in a footer tag to avoid accessibility issues.

  This should fix most of your accessibility issues

  . Regardless you did amazing... hope you find this useful... Happy coding!!!

  Marked as helpful

  1
• 

  kath•130

  @KathundPosted over 2 years ago

  Congrats after 4 attempts you have managed to get it working! After looking at your code the only thing that i would say is that it can be better to put all your styles code in a css file. Basicly coppying all the stuff in a Style tag i would put it in a css file then link to it with <link rel="stylesheet" href="style.css"> then put that just above your title in the html file. Most People would use a css file because people find it easier and better to have it in a css file. BUT remember this is your choice

  0

  ---

  

  whoisisaacongwela•30

  @glubmastercodingPosted over 2 years ago

  @Kathund Thank you I got really discouraged on putting this project on frontendmentor so I just put internal CSS, but next time I will put my CSS in a separate file. :)

  0