QR Code Component

Community feedback

• 

  Dylan de Bruijn•3,230

  @DylandeBruijnPosted 5 months ago

  @lioba-s

  Hiya! 👋

  Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

  Things I like about your solution 🎉

  • Responsive
  • Use of semantic HTML elements
  • Clear descriptive CSS classes
  • Use of CSS custom properties

  Things you could improve ✍️

  • You can remove flex: initial; and position: relative; on your body element. I think you left these while experimenting. As far as I can see they don't make a difference while trying to achieve your result.

  • Try to get into the habit of using classes more instead of ID's for styling your elements.

  • Try experimenting more with Flexbox, the gap property is very useful for example.

  I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! 🌟

  Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

  Happy coding! 😎

  Marked as helpful

  0

  ---

  

  lioba-s•30

  @lioba-sPosted 5 months ago

  @DylandeBruijn

  Hi Dylan, thanks so much for taking the time and providing such helpful feedback. It was nice and easy to implement. I think I'll get back to this project in a while when I've gained more experience that will help me make improvements to it. 🐤

  Oh, and the position: relative on the body (which I removed and then remembered 😅) is there to keep the footer in place... (as described in this article: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ - feel free to tell me if you think a different approach would be more suitable here.

  I just had a look at your version of this project and it's impressive how closely it resembles the original. ✨ All the best to you! 🌞

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 5 months ago

  Hello there!

  Congrats on completing the challenge! ✅

  Your solution looks awesome!

  I saw that you used ID's and Classes on your project. They both work well but hey have a few differences:

  ID’s are unique

  📌 Each element can have only one ID.

  📌 Each ID can have an unlimited amount of Styles applied to it.

  📌 Each page can have only one element with that ID.

  📌 IDs use “#” in the CSS which can also be used as an identifier for HTML “Jump Links” (hyperlinks). This allows you to jump from one place to another on the same web page and can also be used in creating a well-designed Table of Contents.

  Classes are not unique

  📌 You can use the same Class on multiple elements.

  📌 Class naming is case sensitive.

  📌 Classes use a “.” in front of the name in the CSS.

  📌 Each Class can have an unlimited amount of Styles applied to it.

  📌 You can use multiple classes on the same element.

  I hope it helps!

  Other than that, you did an excellent job!

  0

  ---

  

  lioba-s•30

  @lioba-sPosted 5 months ago

  @danielmrz-dev

  Hi Daniel,

  thanks a lot for your kind and motivating feedback! I made sure to use classes rather than ids. 👍

  All the best to you 🌈

  0