Responsive Qr code component using html and css

Community feedback

• 

  S02K•50

  @S02KPosted 11 months ago

  Your QR component looks great i see a couple of things that you could change

  • The color of the background and parg1 are not the same as in the example project.
  • You have your CSS in your HTML file it is considered best to make a seperate file for this.
  • The <p parg1> should be a H1 or H2 because it is a title.

  i hope this helps you improve your project

  Marked as helpful

  1

  ---

  

  Jojo-onedev•300

  @Jojo-onedevPosted 11 months ago

  @S02K Thanks for your help

  1
• 

  P

  Øystein Håberg•10,390

  @Islandstone89Posted 11 months ago

  To add to the tips above:

  HTML:

  • You need a <main>, this is important for accessibility. Make .container a <main>.

  • The image must have alt text. This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

  • .attribution should be a <footer>.

  • Footer text needs to be wrapped in a <p>.

  CSS:

  • It's good practice to include a CSS Reset at the top

  • body should have min-height, not height. Remove the width - the body is 100% wide by default.

  • Remove the fixed width and height. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.

  • Remove margin and height on image, they are not needed. Add display: block and max-width: 100%.

  Marked as helpful

  0