For this challenge, I used flexbox and natural responsiveness

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 8 months ago

  Hi

  There are some foundational practices you need to learn in this challenge. I hope these tips help

  1. All content should be contained within landmarks. This needs a main to wrap around the component and a footer for the attribution.
  2. You don't need the container div at all. Don't use min-width or the large top margin. That makes the content hidden on some screens forcing users to sceoll down for no reason. The component only needs a little space around it so it doesn't hit screen edges. You could do that with a bit of padding on the body if you like in this challenge.
  3. Is there a reason you've used a h3? It's not necessarily wrong but I want to check your reasoning for choosing that heading level.
  4. The image needs a more descriptive alt description. Imagine this component is used in its real context - on a web page, possibly with other QR code cards on the same page. They mustnt all say "QR code" as the image description. Instead, add some extra info to make the image more meaningful. It's a QR code to FrontendMentor.io.
  5. Get into the habit now of always including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good modern examples you can look up and use.
  6. The image should not have an explicit width in pixels. It only needs max-width 100% and display block (and both of these properties would be included in the css reset anyway). You can optionally set the image width to 100% but it doesn't need it.
  7. The heading and paragraph must nit have pixel widths either. If you wanted to limit their width you would set max width but this would need to be in rem or ch units.
  8. NEVER write font size in px. This is extremely important for an accessible solution.
  9. These styles would not be usable if this component needed to be placed in a real site. Instead of using element selectors in css get into the habit now of using single class selectors — place classes on what you want to style. This makes modular css that means components can be picked up and dropped into projects as needed; and element styles won't conflict with each other across components. It's an important principle to start grasping early.
  10. Make sure you fix the font and alignment.

  (Ps. You mention mobile vs desktop first styling in the info above but that's not relevant to this challenge as there is no difference between any screen size)

  Marked as helpful

  1
• 

  LorenzoSerra1•50

  @LorenzoSerra1Posted 8 months ago

  The proposed solution seems well done, the card and the QR code image are ok. I would suggest changing the font, as it would look like the wrong one and is not the same as the design. It was probably not called correctly in the css. For the rest everything seems ok

  Marked as helpful

  1

  ---

  

  Jason Delgado•40

  @delgado-jasonPosted 8 months ago

  @LorenzoSerra1 ah yeah, I did forget to check and make sure the font was working correctly. Good catch!

  1

  

  LorenzoSerra1•50

  @LorenzoSerra1Posted 8 months ago

  @delgado-jason Great, I hope I've been of help. Good job mate

  0
• 

  Jason Delgado•40

  @delgado-jasonPosted 8 months ago

  Hey Grace. Thank you for pointing all that out to me. I didn't realize what I was ignoring by just focusing on the design side of things.

  Your comment on the semantic html and classes make perfect sense, and I will update the program to reflect that.

  With the h3 element, I was looking at the design from an html tag point of view, and the h3 element seemed fitting to me. Still does.

  Also, I will get out of the bad habit of assigning px to font-size and use rem's instead. Thank you for your valuable insight. I really appreciate it.

  0