QR code component

Community feedback

• 

  Mcnafaha•240

  @TheMcnafahaPosted over 1 year ago

  Great job!

  Your solution makes it clear that you understand HTML and CSS. The one change that I would make is giving your container class a max-width. In general, giving your containers a max-width in pixels makes sure your text doesn't go super wide on large screens. I've attached a set of pictures here demonstrating this.

  Marked as helpful

  1

  ---

  

  Bianca Camargo•20

  @biancacmrPosted over 1 year ago

  Thank you, @TheMcnafaha! 😄

  I'm starting to focus more on the frontend area now, as I'm just a junior JS and JAVA developer, and didn't know about the max-width property. The example pictures you provided were really helpful and I'll definitely look up your recommendation and make the necessary changes in my code. Thank you again for taking the time to look at my code and give it constructive feedback! 😊

  1
• 

  Kanishka Priyashantha•690

  @kanishkasubashPosted over 1 year ago

  Hi, Bianca👋. Congratulations on successfully completing the challenge! 🎉

  Your solution looks great, and you've done a fantastic job overall! However, here are some small suggestions after taking a look at your code to make it even better that might interest you:

  HTML:

  • The <main> element should wrap around the entire component. Using the <main> element provides structural clarity, accessibility improvements, SEO benefits, and facilitates responsive design. It helps you create well-organized, maintainable, and user-friendly web pages.
  • Also I've had a look at your code and semantically you could change this to just have the child elements as <div> and <img> inside the <main> tag. You don't necessarily need the <article> as this serves a different purpose Link
  • It's important to note that the alt text should be descriptive but concise, conveying the essential information without being overly long. It should provide a meaningful summary of the image's content and purpose. (Eg: alt="QR Code for frontendmentor.io")
  • This is useful tips about Flexbox and Grid, Flexbox is generally the best modern layout method to use for flexible responsive structures. Grid would be used for content where you want better control of their layout using columns and rows. This article explains it quite well Link as well as this video by Kevin Powell which demonstrates in practice when you would use which Link (NB. You can also combine them in an application, it all depends on the use-case)

  CSS:

  • For the <article>, you can achieve constant sizing by using max-width: 20rem.
  • If you want to build the most-accessible product possible, you need to use both pixels and ems/rems. It's not an either/or situation. There are circumstances where rems are more accessible, and other circumstances where pixels are more accessible. Link

  I hope you find this helpful! 😄 Keep up the great work! 👍

  🖥️Happy coding!

  2