@shoaibansari-092Submitted about 1 month ago
Latest solutions
- Submitted about 1 month ago
QR Code Component Using Flex
- HTML
- CSS
a. Improving Code Efficiency: I’d like feedback on whether my CSS structure could be optimized further, such as reducing redundancy or using best practices.
b. Expanding Layout Techniques: While I used Flexbox effectively, I’d like to understand how CSS Grid could be applied for better structure in future projects.
Latest comments
- @SanCross354Posted about 1 month ago
Hello Mr. Shoaib. You've done a great job at completing this challenge 😎. There're some advice for your QR Project, such as :
- When it comes to semantic HTML, it'd best to replace <div class ="main"> with <main> tag for better semantics. Then u put <strong> inside an <h2> is unnecessary because <h2z> already emphasize the text (it means u can change it from <h2> to <h1> as the primary heading
- Your <img> tag has an empty alt atribute and this's gonna make it unreadable for screen readers if suddenly the image can't be loaded. You should add alt description.
- There're issues with Layout & Responsiveness. Using margin-left: 40% didn't make our card to be centered on smaller screens. It'd be good if you utilize flex or grid for centering. In your css file, you already used align-items: center and it's ineffective because it only works in display: flex
- The QR image's not responsive because you set it at 255px that could be broken on smaller screens. You can use width: 100% and adjust the container
Marked as helpful0
