Skip to content
OverviewSolutions
19
Comments
4
Bhoami K Khona
@bhoamikhona

All comments

  • Bhoami K Khona•360
    @bhoamikhona

    This is such a great solution to the challenge. I know the frustration that goes into working with bootstrap. It looks like it will help you a lot but, when you start doing it, it's a huge mess. I am glad you persisted through it. I respect and appreciate that. Congrats on completing the challenge! 🥂

    The one thing that I noticed that you might wanna fix is that in mobile view, when you open the navigation drop-down, the "contact" button turns invisible on hover.

    Marked as helpful
  • Bhoami K Khona•360
    @bhoamikhona

    Use justify-content: center and align-items: center on the container and make the body height: 100vh to perfectly center the component on the web-page instead of trying to use padding to center it.

    Moreover, move the media query to the bottom of the CSS file. This is because, the CSS file is read from top to bottom. So, it is not properly picking it up.

    The border-radius in-between two cards should be removed. It should only exist in the outermost border of the component.

    Here is my solution to this, if it helps: My Solution

    Marked as helpful
  • Bhoami K Khona•360
    @bhoamikhona

    The card is not centered, the active states are not working, need to use semantic HTML, and it is not responsive. Need to at alt="" to images.

    HTML

    • You need to use semantic HTML. When we talk about semantics, it means that certain elements have a meaning or a purpose attached to them. You can learn more about it here: https://www.w3schools.com/html/html5_semantic_elements.asp

    CSS

    • Use pseudo class :hover on your button for active states.

    • You can learn more about it here: https://www.w3schools.com/cssref/sel_hover.php

    • Your layout needs to be responsive i.e. the design needs to adapt to multiple screen sizes. Might want to use media queries for it.

    • Learn more about it here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Accessibility

    • You need to add alt property values to all the images as accessibility allows disabled people to navigate the website better.
    • You can learn all about accessibility here: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility

    Feel free to ask if you have any questions.

    Here is my solution for this challenge, hope it helps: https://www.frontendmentor.io/solutions/perfume-product-card-project-ajFg9WZ6i_

    Marked as helpful
  • Bhoami K Khona•360
    @bhoamikhona

    Hello there 👋. Good job on getting so far on the challenge!

    I have some suggestions about your code that might interest you.

    HTML 🏷️:

    • Use semantic elements such as <main>, <section>, <footer> to improve accessibility and organization of your page.

    CSS 🎨:

    • Your layout also doesn't seem responsive which is why it may look different on different screen sizes. I see you are using bootstrap, I would suggest reading through the bootstrap grid system to understand how it works to make your layout responsive. Maybe classes like col-md-6 should help.

    I hope you find it useful! 😄

    Happy coding!