QR Card (HTML, CSS)

Community feedback

• 

  P

  Steven Stroud•11,870

  @StroudyPosted 2 months ago

  Hey, Great solution and it is so close to the original design! Few things I noticed,

  • It is best practice to have a <main> tag inside your body highlighting the main section.
  • Using a naming convention like BEM, Using proper naming will prepare you for the changes in design of the website.
  • Using max-width: 100% or min-width: 100% is way more responsive then just width:100%, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.
  • Line height is usually unitless instead of line-height: 150%; should use line-height: 1.5; this means it is 1.5 x the font-size, unitless value ensures that the line height will scale proportionately.
  • You should avoid using px as it is an absolute unit and not a responsive unit like rem or em, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.
  • You should apply a full modern reset to make things easier as you build, check out this site for a Full modern reset
  • Having an aspect ratio on your images will increase performance to reduce layout shifts and improve CLS,
  • Check out this article from a Frontend mentor dev about responsive-meaning.

  Nice to see you using responsive units like rem and em, you should apply them to fonts as well for accessibility. Hope to see more from you soon, Happy Coding!

  Marked as helpful

  3

  ---

  

  Santiago Andres Gelvez Camargo•40

  @SantiagoGelvezPosted 2 months ago

  @Stroudy Wow amazing feedback! Thanks so far. I tried to put as much responsive tag as I remember but with your help, I will improve my proyect to get better results. Again thank you so much.

  1

  

  P

  Steven Stroud•11,870

  @StroudyPosted 2 months ago

  @SantiagoGelvez, I'm still new to this myself but a lot of this knowledge was passed on to me and it is too good not to share, I hope it helps, really give those articles a good read to fully grasp it. It will take time to keep referring back to it, I booked marked those pages. Good luck my dude!

  0
• 

  P

  Teodor Jenkler•3,740

  @TedJenklerPosted 2 months ago

  Hi @SantiagoGelvez,

  Nice project! The previous feedback mentioned some great points, and I'd like to add a few more specific to this one:

  I recommend using OG (Open Graph) meta tags due to the shareable nature of your project. These tags will create more attractive links when shared and can also help improve your SEO.

  Consider making the QR codes clickable to assist older users who may find it easier to click the link rather than scan the code. Alternatively, you could add a link below the QR code for easy access.

  As an extra challenge, try creating your own custom QR code—it's a fun skill to learn and could be a unique touch for your project!

  Keep up the great work!

  Best, Teodor

  Marked as helpful

  1

  ---

  

  P

  Steven Stroud•11,870

  @StroudyPosted 2 months ago

  @TedJenkler Never knew about OG meta tags, Thank you for sharing!

  1

  

  Santiago Andres Gelvez Camargo•40

  @SantiagoGelvezPosted 2 months ago

  @TedJenkler Oh! Really good tips. I'll learn about OG and understand it to implement in my next challenges.

  About Custom QR is an idea I have to improve a lot the project. I know there are libraries that help to achive this goal.

  Thanks a lot for your comment. It help me so much!

  1