Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Creating that QR code with Javascript.

@Julian-Carlosama

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have two questions! I would know the best practices for this project. I know it's basic, but I want to give me your feedback.

Thank you for your time and consideration.

Community feedback

@dxiDavid

Posted

Hello @Julian-Carlosama 👋🏾

Congrats on completing the challenge 🎉

I have a few suggestions on how you can improve your code:

1. HTML📃

  • Make sure your content is wrapped inside a <main> landmark tag. If you want to learn more about semantic HTML tags you can find that here.
  • Make sure that your images have alt text for screen readers which will improve accessibility for your future websites. Try to have descriptive text so that the person knows exactly what the image is.

2. CSS📄

  • Avoid setting fixed values for dimensions like width and height. Instead set a max-width and max-height for your elements
  • Avoid using absolute units like px for anything other than border-radius or box-shadow. Use responsive units like em and rem which will make your projects more responsive.
  • To center your card you can try the following methods
  1. Using grid
body{
     min-height: 100vh;
     display: grid;
     place-items: center;
}
  1. Using flexbox
body{
     min-height: 100vh;
     display: flex;
     flex-direction: column; 
     justify-content: center;
     align-items: center;
}

Another useful tip is to build a habit of setting custom properties for the styles found in the style guide and any other styles you might re-use.

You might also want to set up utility classes for centering things to avoid repeating yourself throughout the code.

Your solution looks great

I hope you found this helpful 😁

Happy Coding 🥂

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord