Submitted 6 months ago

QR Code Component HTML CSS

Arvind Anthey•20

@aanthey

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Im proud of completing this project by myself and being able to use documentation to figure out some issues. Next time I'd like to be able to complete a responsive design and learn best practices to make my code more efficient and concise.

What challenges did you encounter, and how did you overcome them?

The challenges I encountered were making the actual card itself and figuring out the positioning of the image inside the card. The Card - I tried to figure out using my own knowledge from the top of my head and when I couldnt i referred to the documentation from w3schools and it worked. Positioning the image - the main issue I had was trying to center the image inside of the card, I eventually found a decent work around when I played around with the padding but it didnt come out exactly how I wanted it to.

What specific areas of your project would you like help with?

I'd like help knowing best practices for my code and how to make it more clear and concise, so any tips would be appreciated!

Community feedback

Grego•1,310
@Grego14Posted 6 months ago
👋 Hello! 🎉 Congratulations on completing the challenge! 🎉

Remember to leave the alt attribute empty if the image doesn't have a semantic meaning or is just for decoration, and when using it you should use more descriptive text. Since the alt attribute is commonly used by screen readers to speak the alt of the image.

Don't skip the headings, each page must first have an h1 element and then the others!

Don't use units like vh to specify sizes on elements unless it's something like a background that you want to take up the entire height of the screen, in the img element you're using height: 38vh which on different screen sizes can make the image look bad.

I also recommend reading a bit about the object-fit property as it will help you make the images look better. In this case, the cover value of the object-fit property will make the image look better.

Hope this helps! 😁
1

Please log in to post a comment

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