QR Code Component with CSS

Community feedback

• 

  Agata Liberska•4,075

  @AgataLiberska

  Posted almost 3 years ago

  Hi! I think setting those flex styles on a container class is definitely a good idea. It makes it more reusable and if you were to add something else in the body, it wouldn't be affected. You could also add justify-content:center to your styles there to center horizontally - in your solution this is done with margin:auto which also works fine, but in a bigger project if you wanted to reuse this, I think I would prefer all centering styles to be under one class (rather than a container and the component itself if that makes sense).

  Another way to achieve the same result is to use display:grid;place-items:center; - just a matter of preference which one you go for.

  What I would like to see in your solution is some more semantic tags. so your container could be a <main> and then for the card itself, I would add an <article> tag inside the container. Also don't forget to add a width and height to your image :)

  If we're also looking at accessibility, it might be a good idea to add a link around the QR image :)

  30

  Marked as helpful
• 

  kawaiiakuma•130

  @nirvayathapa

  Posted almost 3 years ago

  You can also use grid to center the container by writing display:grid; and place-items:center; inside body tag and in ur project ,u used flexbox which is also good.Though i am a beginner what i learned from doing project is u really need to be proficient with grid,flexbox and box model.And i dont know bout best practice but i usually target specific html element especially when doing specific style to them and i think it's best to specify the tag and u can do it by specifying the class or id of the particular tag u r styling

  10