@deadtowelSubmitted about 2 months ago
Latest solutions
- Submitted about 2 months ago
Responsive QR Code Component Using Flexbox and Semantic HTML
- HTML
- CSS
I'd like help with responsiveness and also a feedback on my use of Flexbox for the layout—specifically if there are any ways to make it more flexible or cleaner. Also, I’m open to suggestions on improving accessibility, particularly for users with disabilities, and how to implement best practices in this area.
Latest comments
- @RamadhanAdamPosted about 2 months ago
- Improve Alt Text for Accessibility Update the alt attribute of your image to provide a more descriptive text for screen readers:
html Copy <img src="./images/image-qr-code.png" alt="QR code linking to Frontend Mentor website" class="card-image"> 2. Use Semantic HTML for Structure Wrap your main content inside the <main> tag for better structure and accessibility:
html Copy
<main> <div class="wrapper"> <div class="card"> <img src="./images/image-qr-code.png" alt="QR code linking to Frontend Mentor website" class="card-image"> <h3 class="card-title">Improve your front-end skills by building projects</h3> <p class="card-description">Scan QR code to visit Frontend Mentor and improve your front-end skills by building projects</p> </div> </div> </main> 3. Add Meta Tags for SEO and Social Media Add basic meta tags to improve SEO and allow better sharing on social media platforms:html Copy <meta name="description" content="Improve your front-end skills by building projects with this QR code component challenge."> <meta property="og:title" content="Frontend Mentor | QR Code Component"> <meta property="og:description" content="Improve your front-end skills by building projects with this QR code component challenge."> <meta name="twitter:card" content="summary_large_image"> 4. Make Your CSS Responsive Add a simple media query to make sure your card is responsive on smaller devices:
css Copy @media (max-width: 600px) { .card { width: 90%; padding: 15px; } }
0
