Submitted over 1 year ago

Flexbox, Media Queries

Shea•210

@sh0910

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I am unsure how to remove the white line on the top and bottom of the image (desktop version). Since the image's height is 450px, I can add "max-height: 450px" to the container to fix the issue; however, I am not sure if this is a good approach. I'd appreciate any tips and feedback on how I can improve!

Community feedback

Abdul Khaliq 🚀•72,560
@0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

HTML 🏷️:

This solution contains some minor semantic issues which may cause lack accessibility

The old price is not being properly announced, you have used span element for that.

Actually there's a native html element which comes handy in these situations. it is del element

So you can use like this <del>$169.99</del>

These are the tips which improves the accessibility in real world situations.

If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
0
Shea•210
@sh0910Posted over 1 year ago
Thanks for taking the time to review my code and offer suggestions; they are helpful! I will add the del element and sr-only utility in my project.
0
Tushar Biswas•4,080
@itushPosted over 1 year ago
Congratulations on completing the challenge! 🎉

Your solution looks nice to me :)

I don't see the white line on the top and bottom of the image (desktop version). I tried with chrome, firefox and edge.

In my projects:

I always start with mobile-first workflow.

I use at least one main element for a page (entire content goes into the main, if I'm not using header & footer), and avoid divs as much as possible and use section and article element wherever I can.

<body> <main> All content </main> </body>

I Use relative units as much as possible and avoid absolute units whenever possible.

If you are someone who is just starting out with front-end development, I strongly suggest starting with the QR code component project(which you did). Also in the challenges page you may filter by (Newbie, HTML&CSS) sort by (easier first) to select projects that will help you solidify your foundation. To avoid any potential knowledge gap⚠️ please first solidify HTML, CSS, JS fundamentals and then move on to any framework or library.

I remember when I started out, I made countless mistakes and spent long hours searching for solutions. But hey, you don't need to go through the same struggles! 🙌 To help you shorten the learning curve, I recommend going through the following articles. They contain valuable insights that can make your journey smoother:

📚🔍 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, media queries, mobile-first workflow, best practices etc. in a simple way.

📚🔍 11 important HTML topics where I discuss about my thought process and approach to convert a design/mock-up to HTML along with important topics like block and inline elements, HTML Semantic Elements.

I hope you find these resources helpful in your coding adventures! 🤞

I'm eagerly looking forward to seeing the amazing projects you'll create in the future! 🚀💻

Keep up the fantastic work and happy hacking! 💪✨
0

Please log in to post a comment

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