Mobile-first solution using CSS Grid and Flexbox

Community feedback

• 

  Mykyta Kavetskyi•240

  @OniOdd

  Posted almost 2 years ago

  Hello! 😎 Here is what I can advise you:

  1. Write classes, identifiers, and selectors in general in lower case.
  2. If the class consists of two words, then separate them with a dash (for example: card-back).
  3. Try to avoid such specificity of selectors, such as: "section .CardBack .text". It is enough to use one selector.
  4. Reduce markup. Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML.
  5. It is also advisable to connect fonts in an html file using the link tag, rather than in a css file using @import.

  Good luck! 👍

  00

  Marked as helpful
• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted almost 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  QR iMAGE ALT TEXT 📸:

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute.

  ---

  • The alt attribute should explain the purpose of the image.

  ---

  • E.g. alt="QR code to frontendmentor.io"

  ---

  <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  00

  Marked as helpful