Responsive QR-Code using HTML and CSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 2 years ago

  There are some important changes needed here

  Html

  1. Container should be a main element. This is called a landmark and worth reading about to make sure you understand their use
  2. The image is the most important content in this component. It is nit decorative. That means it needs a proper alt description like "QR Code to FrontendMentor.io"
  3. You should never have text in divs or spans alone. They are meaningless elements used for layout. For text you should always be using meaningful elements like heading and paragraph in this challenge

  CSS

  1. Look up how to center a component o n the screen. In this case, your body element should have min-height 100vh along with flex or grid properties to center the component on the screen. The component should not have huge margins to try and center it
  2. You don't need max height on the image. Standard practice is to make images display block and max-width 100%.
  3. The container should not have an explicit width. Instead, use max width, so it can shrink if it needs to (like it does on my small phone screen)
  4. Give the card a small bit of margin so it can't hit the screen edges. Alternatively, you could give the body a little padding
  5. Font size should never ever be in px! Use rem. Very important
  6. This challenge does not need a media query

  Marked as helpful

  2

  ---

  

  Ritesh Diwan•50

  @abandonedwafflePosted about 2 years ago

  @grace-snow Thank you. Your feedback is much appreciated. I will keep all this points in mind and try to improve on it.

  0

  

  Ritesh Diwan•50

  @abandonedwafflePosted about 2 years ago

  @grace-snow Hey. Thanks Grace. I have made changes to my code according to your feedback. I will keep these points on my mind from next time.

  0
• 

  Ms Amina•70

  @AmiyahayadevPosted about 2 years ago

  Your solution looks good, for best practice , use heading tags <h1>....to<h6> for any heading. try increasing the font-weight of the main heading by using a h2 or h3 instead of adding the text directly into a div. For flexbox, i found this game very helpful and i really recommend , https://flexboxfroggy.com/

  Marked as helpful

  1

  ---

  

  Ritesh Diwan•50

  @abandonedwafflePosted about 2 years ago

  @AMI-lang Thank you.

  0
• 

  Renato Lacerda•160

  @ralacerdaPosted about 2 years ago

  Hey, great job on the solution.

  If you want to learn flexbox, practice, read some articles and practice more. Flexbox can be simple, but it also has a lot of power to do complex things.

  The "manual" for all web development is the MDN Web Docs, they have guides, visual examples and tips. Here is their guide to flexbox, worth a read: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

  CSSTricks also has a "visual guide" to flexbox, which is really helpful to visualize how some flex properties works: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  So here is a small challenge, try centering vertically and horizontally your .container div using flexbox.

  Marked as helpful

  0