qr-code-component-main

body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } Try this to align(top-bottom) and justify(left-right) your project to the center. It applies to the parent component(body), don't forget about !!min-height!!. You can use grid instead of flex too.

Well done, here are some things to review 😊:

• Overusing div tags: Try using more semantic HTML elements like <section>, <header>, and <article>. It’ll help with both accessibility and SEO.

• Forgetting alt text on images: Don’t skip the alt attribute. It’s essential for accessibility and helps search engines understand what your images are.

• Poor use of Flexbox and Grid: Be careful not to mix Flexbox and Grid unnecessarily. Each has its strengths—use the right one based on the layout needs.

• Not testing across browsers: Don’t forget to check how your site looks in different browsers like Firefox and Safari. Cross-browser testing is super important.

• Ignoring accessibility: Focus on features like keyboard navigation, contrast ratios, and ARIA labels. They make your site usable for more people.

• Using fixed heights for elements: Setting fixed heights can cause overflow issues. Use min-height or allow content to expand naturally to avoid problems.

• Not using responsive images: Be sure to use srcset or the <picture> element to optimize images for different devices. This improves performance, especially on mobile.

Hope you found this comment helpful 💗💗💗

Good job and keep going 😁😊😉

@VaibhavSain, I’d like to provide some feedback. In past challenges, I noticed you haven't engaged or responded when solutions were submitted. Networking and actively engaging with the community are essential, and I highly encourage you to embrace these practices. They can greatly enhance collaboration and growth.