Mirza Monirul Alam

Latest comments

• 

  Mark Hatala•40

  @hmark94Submitted about 2 years ago

  

  Responsive Card details form with live update. React, Tailwind CSS

  #react#tailwind-css

  1

  20
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted about 2 years ago

  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

  1
• 

  uepzues•270

  @uepzuesSubmitted about 2 years ago

  

  stats-preview-card-component

  1

  30
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted about 2 years ago

  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.

  0
• 

  Tiago R. Oliviera•40

  @tiago-roSubmitted about 2 years ago

  

  Responsive page using flexbox

  1

  40
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted about 2 years ago

  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

  1
• 

  link-din•10

  @danilo-easy33Submitted about 2 years ago

  

  CHALLENGE HUB Profile card component

  1

  20
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted about 2 years ago

  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

  0
• 

  Kaique•40

  @KaiqueNeresSubmitted about 2 years ago

  

  CHALLENGE HUB Profile card component

  1

  20
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted about 2 years ago

  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

  0
• 

  GTM•10

  @GautamArora7Submitted about 2 years ago

  

  First practice

  2

  20
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted about 2 years ago

  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.

  0