Solution QR code component

Community feedback

• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on completing the "QR Code Component" project! 🎉 Your project shows a great understanding of HTML and CSS. Here are some best practices and recommendations for further enhancements:

  1. Semantic HTML:

     • Use more semantic tags to enhance the structure and accessibility of your code. For instance, wrapping the main content in a <main> tag is a good practice, which you've done well.
     • In your img tag, consider adding a more descriptive alt text for accessibility purposes, like alt="QR Code for Frontend Mentor".

  2. CSS Best Practices:

     • Organization: Your CSS is well-organized. Keep maintaining this structure as it will help in managing more complex projects.

  3. Code Efficiency:

     • DRY Principle: Always look for opportunities to reduce repetition in your code. This makes your codebase cleaner and easier to maintain.
     • CSS Shorthand: Utilize CSS shorthand properties where possible to make your code more concise.

  4. Accessibility:

     • Keyboard Navigation: Ensure that all interactive elements are accessible via keyboard.
     • Color Contrast: Check that the text and background colors have sufficient contrast, especially for readability.

  5. Further Learning:

     • As you continue your journey, explore topics like CSS animations, flexbox, and grid systems to enhance the visual appeal and layout of your projects.
     • Experiment with different design frameworks like Bootstrap or Tailwind CSS to see how they can speed up your development process.

  Useful Resources:

  • MDN Web Docs for comprehensive learning resources on web technologies.
  • W3Schools for tutorials on HTML and CSS.
  • A List Apart for in-depth articles on web design and development.

  Keep up the great work, and I'm looking forward to seeing more of your projects! 🚀

  Marked as helpful

  1

  ---

  

  Stefan Bojkovski•640

  @xStephxPosted 10 months ago

  @petritnuredini thanks for advice! I followed all advices and will apply them in future projects. If you have any other suggestions feel free to text me!

  1
• 

  hemel•70

  @hemel17Posted 11 months ago

  Greate work! But for the class a you could use a header tag and for the class b you could use a p tag. Btw, checked your github profile and got some motivation to code daily. Keep up the good work. Thank you. :)

  Marked as helpful

  1

  ---

  

  Stefan Bojkovski•640

  @xStephxPosted 11 months ago

  @hemel17 thanks for the feedback! For the suggestion of using header tag and p tag, I will fix it to make the code better organized. I am also glad that I have motivated you with my github profile. If you have other suggestions feel free to text me again.

  1

  

  hemel•70

  @hemel17Posted 11 months ago

  @xStephx Wanna improve your css skill? Complete this challenge. https://cssbattle.dev/play/VMfkYfdqT7pH9oPEqNb0 Let me know your score.

  1

  

  Stefan Bojkovski•640

  @xStephxPosted 11 months ago

  @hemel17 thanks a lot for giving me challenge. I solved this challenge and I got 600.75 score with 659 characters and match percent 100%. If you have other suggestions feel free to text me again.

  1

  

  hemel•70

  @hemel17Posted 11 months ago

  @xStephx I'd to use almost 100 more characters to get the same result. Can I see your code?

  1

  

  Stefan Bojkovski•640

  @xStephxPosted 11 months ago

  @hemel17 here you are,

  <div class="a s"><div class="x c a"></div><div class="w t l a"><div class="c a z"></div></div><div class="w b l a"><div class="c a z"></div></div><div class="w t r a"><div class="c a z"></div></div><div class="w b r a"><div class="c a z"></div></div></div>

  1

  

  hemel•70

  @hemel17Posted 11 months ago

  @xStephx Style?

  1

  

  Stefan Bojkovski•640

  @xStephxPosted 11 months ago

  @hemel17 I don't know why it doesn't want to I am trying to write

  0

  

  Stefan Bojkovski•640

  @xStephxPosted 11 months ago

  body{background-color:#0C2428;display:grid;place-items:center;}.s{position:relative;width:100px;height:100px;}.w{width:50px;height:50px;}.x{width:40px;height:40px;}.t{top:-25%;}.b{bottom:-25%;}.l{left:-25%;}.r{right: -25%;}.a{position:absolute;background:#D9D9D9;}.c{border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#0C2428;}.z{width:20px;height:20px;}

  0

  

  hemel•70

  @hemel17Posted 11 months ago

  @xStephx Can I be connected to you through any messaging app?

  0

  

  Stefan Bojkovski•640

  @xStephxPosted 11 months ago

  @hemel17 here is code

  0

  

  Stefan Bojkovski•640

  @xStephxPosted 11 months ago

  @hemel17 discord? what do you have for messaging?

  1

  

  hemel•70

  @hemel17Posted 11 months ago

  @xStephx Thank you.

  1

  

  Stefan Bojkovski•640

  @xStephxPosted 11 months ago

  @hemel17 You're welcome!

  0

  

  hemel•70

  @hemel17Posted 11 months ago

  @xStephx Yup. Sent you request from hemel17.

  1

  

  Stefan Bojkovski•640

  @xStephxPosted 11 months ago

  @hemel17 accepted.

  0
• 

  Kishore Kumar Mahto•500

  @iamkishoremahtoPosted 11 months ago

  nice work

  1

  ---

  

  Stefan Bojkovski•640

  @xStephxPosted 11 months ago

  @iamkishoremahto thanks!

  0