Frontend Mentor | Flexbox, Media Queries coding challenge solution

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,660

@0xabdulkhaliq

Posted about 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

Shea• 210

@sh0910

Posted about 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.

Tushar Biswas• 4,080

@itush

Posted about 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! 💪✨

Flexbox, Media Queries

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community