Responsive QR Page using HTM, CSS Flexbox and media queries

Solution retrospective
- Is there a better way to structure the HTML and name the CSS classes?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @SrHatcher
Hello! Your project is great, keep the good work! :)
To improve your HTML structure I would recommend to start using semantic HTML, for example you could replace your div with class card with a main tag, replace your p tag with class title with a h1 tag. You could also start using BEM to name your CSS styles. And finally you could try to remove your div with class wrapper and move its styles to the body tag, It will have the same result :)
Marked as helpful - @cervantesdeveloper
Maybe you should more semantic tags, I would use a <figure> tag to wrap your card, and a <figcaption> for the text. About the CSS y write it in this order
/** custom properties / :root { / your custom properties/ }
/** reset / / model box styles, font size, etc/
/** components / / buttons styles, cards styles , etc/
/** utilities */ / custom styles (hidden/visible components, call to action buttons)
/** misc **/ /*anything that doesn't fit in the other categories
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