Design comparison
Solution retrospective
I wrote the code mobile first so it was easier to build the computer version after. I did a perfect job and would not change anything.
What challenges did you encounter, and how did you overcome them?Bottom text was overlapping with the card so I lowered it.
What specific areas of your project would you like help with?Commenting my code.
Community feedback
- @Mohammad-MoneerPosted 6 months ago
Hello there, You made a good solution 👍 I noticed one thing that could be a small enhancement to your code. Currently, you have the <img> element directly inside the .card container with a border-radius applied directly to the image. This approach works well, but in my solution I wrapped the image in a separate container (div) to ensure consistent application of the border radius and provide greater flexibility for future styling adjustments. This approach also improves the readability and maintainability of the code. Here's a small example of how you could modify your code:
HTML:
<main> <div class="card"> <div class="card-image"> <img src="./images/image-qr-code.png" alt="QR Code"> </div> <div class="card-text"> <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> </div> </div> </main>CSS: .card-image { overflow: hidden; border-radius: 10px; }
.card img { width: 100%; }
Again, great job on your project! I hope you find this suggestion helpful.
Marked as helpful0 - @andychuks51Posted 6 months ago
Wow! this is great and you did a good job 👌... I mostly design for desktop, so it it better to design for mobile first??
0
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