Skip to content
OverviewSolutions
28
Comments
22

Mirza Monirul Alam

@WebDevMirzaDhaka, Bangladesh680 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Mirza Monirul Alam•680
    @WebDevMirza

    Hi,

    To validate a form in react, you can use formik and yup package. They are easy to use and have enough resources in docs on how to apply to a project.

    Thank you.

    Marked as helpful
  • Mirza Monirul Alam•680
    @WebDevMirza

    Hi,

    I skim through your code line by line. I want to share my views.

    HTML

    • You use picture source combination to deal with device oriented pictures which is the best in my opinion. 👍 👍

    I also found some areas where you can improve your code.

    HTML:

    • Give a <h1></h1> with small font size to solve Page should contain a level-one heading warning.
    • Provide an alt text for image to solve Images must have alternate text error.

    CSS:

    main {
    ........................
    ........................
    letter-spacing: 0.05em;
    line-height: 1.6;
}
    • Add this two line of code and observe the change. Spacing is important to improve design.

    Apart from this, the rest of the part is great.👍 I hope, this might help you. 👍👍👍

    Thank you.

  • Mirza Monirul Alam•680
    @WebDevMirza

    Hi,

    Congratulation on this solving this project.

    • You do not need alt text inside source tag.
    • Use alt tag in img.
    <picture>
        <source media="(min-width: 376px)" srcset="images/image-product-desktop.jpg" >
        <img src="images/image-product-mobile.jpg" alt="Perfume Channel Gabrielle">
      </picture>

    I hope that it might help you. 👍

    Thank you.

    Marked as helpful
  • Mirza Monirul Alam•680
    @WebDevMirza

    Hi,

    Congratulation on completing this project. You have already found a problem regarding bg-image.

    HTML:

    • Every html should have a main tag that you have not applied. Wrap everything inside <main></main> to solve accessibility WARNING that you have now. main is used for the unique part of the site where any repeated sections such as nav, sidebar, footer are not allowed. For more info visit W3 School

    CSS 🙂

    body {
  background: url(../img/bg-pattern-top.svg) no-repeat right 50vw bottom 40vh,
    url(../img/bg-pattern-bottom.svg) no-repeat left 50vw top 54vh;
 background-color: hsl(185, 75%, 39%);
}
    • This will add the background images at the position that they should be. 🧐

    Apart from this, the rest of the part looks nice.👍

    Marked as helpful
  • Mirza Monirul Alam•680
    @WebDevMirza

    Hi,

    Congratulation on completing this project. You have already found a problem regarding bg-image.

    HTML:

    • Every html should have a main tag that you have not applied. Wrap everything inside <main></main> to solve accessibility WARNING that you have now. main is used for the unique part of the site where any repeated sections such as nav, sidebar, footer are not allowed. For more info visit W3 School

    CSS 🙂

    body {
  background: url(../img/bg-pattern-top.svg) no-repeat right 50vw bottom 40vh,
    url(../img/bg-pattern-bottom.svg) no-repeat left 50vw top 54vh;
 background-color: hsl(185, 75%, 39%);
}
    • This will add the background images at the position that they should be. 🧐

    Apart from this, the rest of the part looks nice.👍

    Marked as helpful
  • Mirza Monirul Alam•680
    @WebDevMirza

    Hi,

    I found several issues where you can improve your code.

    HTML:

    • Wrap everything inside <main></main> to solve accessibility WARNING that you have now. main is used for the unique part of the site where any repeated sections such as nav, sidebar, footer are not allowed. For more info visit W3 School
    • Give a <h1></h1> with small font size to solve Page should contain a level-one heading warning.

    CSS

    p {
    font-size: 15px;
    text-align: center;
    color: hsl(220, 15%, 55%);
    padding: 10px 25px;
}
    • You can use shadow in .card for good appearance:
    .card {
       box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

    Best of Luck. 👍 Thank you.

View more comments