Design comparison
Solution retrospective
Am proud of knowing how to use more advance CSS grid features.
And what I will do differently next time are:
- I will make sure I use advance CSS styling
- I will make sure I use CSS preprocessors....
- I will make sure I explore web accessibility standards and best practices to ensure my QR code component is accessible to users with disabilities.
The challenges I encountered was how to implement CSS grid.. I overcome them through some useful resources like MDN and w3schools.....
What specific areas of your project would you like help with?On How to use CSS Media Queries in making the screen size....
Community feedback
- @Patrycja-dzPosted 8 months ago
Hello,
First off, I want to commend you on your first solution! It's a great start, and you should feel proud of your progress.
While reviewing your code, I noticed a couple of areas where we can improve the handling of element dimensions, particularly regarding the image's height and width.
One issue I observed is the hardcoded dimensions set for the image. A good practice to follow is to utilize a simple image reset technique, such as setting width: 100%; and display: block;, ensuring that images always scale appropriately to fit their container.
Additionally, you've specified a height for the container element, which is redundant since it's already a grid item inheriting dimensions from its parent element. Given that you've declared display: grid; at the body level, the grid row and grid column values (in this case, 1fr x 1fr) already determine the height and width respectively.
Finally, it's worth mentioning that it's beneficial to review the style-guide.md file, where styles such as colors are defined. This ensures consistency and clarity throughout the project.
By addressing these issues and referring to the style-guide.md for style definitions, we can ensure a more flexible and maintainable layout. Keep up the good work, and feel free to reach out if you have any questions or need further assistance.
Best regards, Patrycja
Marked as helpful0
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