Design comparison
SolutionDesign
Community feedback
- @ShivangamSoniPosted 5 months ago
Nice Work. Just a few things.
1. Apply Resets on all elements rather than just on the HTML
/* use Astrisk instead */ * { box-sizing: border-box; margin: 0; padding: 0; }
2. Explore & use more HTML tags: Making the entire Card component out of the
main
tag doesn't really make sense. It would have been better to use thearticle
tag similar to this:<main> <article> <img src="images/image-qr-code.png" alt="qr-code"> <h1>Improve your front-end skills by building projects</h1> <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </article> </main>
3. Use CSS Classes: It makes the code much more understandable & maintainable. Using just tags is not going to be a good solution when it comes to larger projects. I also suggest looking into things like BEM Style CSS
<main> <article class="card"> <img class="card__img" src="images/image-qr-code.png" alt="qr-code"> <h1 class="card__title">Improve your front-end skills by building projects</h1> <p class="card__info">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p> </article> </main>
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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