All 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 over 2 years ago

  

  Responsive page using flexbox

  1

  40
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 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 over 2 years ago

  

  CHALLENGE HUB Profile card component

  1

  20
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 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 over 2 years ago

  

  CHALLENGE HUB Profile card component

  1

  20
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 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 over 2 years ago

  

  First practice

  2

  20
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 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
• 

  Chanawin Kamolpanus•350

  @Chanawin-kmpnSubmitted over 2 years ago

  

  Column preview card using Flexbox

  1

  20
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 2 years ago

  Hi,

  HTML:

  • Instead of using button for navigating to another page, <a></a> is the best approach. button is mainly use for submitting data to the server.
  • Wrap the entire attribution with <footer></footer> to solve accessibility warning that you have now.

  <footer>
     <div class="attribution">
           Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
           Coded by <a href="https://www.frontendmentor.io/profile/Upond">Chanawin Kamolpanus</a>.
     </div>
  </footer>
  

  CSS

  • add the following code for button for a hand cursor 👆.

  button {
      cursor: pointer;
  }
  

  • You may add some transition effect for better UX.

  button:hover {
      color: hsl(0, 0%, 95%);
      border: 2px solid hsl(0, 0%, 95%);
      background-color: transparent;
      transition: all 0.25s 0s linear;
  }
  

  The rest of the part is fine. Well done. Keep the good work on. 😃 👍

  Marked as helpful

  1
• 

  Felipe Carpes•10

  @felipecarpesSubmitted over 2 years ago

  

  QR Code component

  1

  20
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 2 years ago

  Hi,

  I found an area 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.
  • Provide an alt text for image to solve Images must have alternate text error.

  CSS

  .qr-img {
        height: 250px;
        width: 100%;
        border: 1px #000 solid;
        border-radius: 0.625rem;
      }
  

  • No need to use border: 1px #000 solid; since the provided design has no border.
  • 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;
  }
  

  Apart from this, the rest of the part is great.👍👍

  1
• 

  Pavlo Ivanichenko•10

  @pashaprotonSubmitted over 2 years ago

  

  The very first challenge, QR code component

  3

  40
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 2 years ago

  Hi,

  I found an area where you can improve your code.

  • Put everything inside <section></section> to <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

  Apart from this, the rest of the part is great.👍

  Marked as helpful

  1
• 

  Srikanth•110

  @AgeOfUltraSubmitted over 2 years ago

  

  Huddle landing page with single introductory section

  3

  40
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 2 years ago

  Hey,

  Good work on that. On desktop version, it looks great. But in mobile version, the design is not the same as it should be.

  • Reduce spacing on both side (left and right) for the mobile version.
  • Add cursor: pointer; on button and icons.

  Rest of the part is fantastic. Keep the good work on. Hopes this might help you.

  Thank you.

  Marked as helpful

  0
• 

  uepzues•270

  @uepzuesSubmitted over 2 years ago

  

  nft-preview-card-component

  2

  30
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 2 years ago

  Hey,

  Great coding on this project! I have noticed something missing on this project. Your card__heading, and .name class have no cursor pointer. My suggestion is to add the following code:

  .name:hover, 
  .card__heading:hover {
      cursor: pointer;
  }
  

  I hope this might help you. Keep the good work on. 👌 Thank you.

  Marked as helpful

  0
• 

  Carl•160

  @carllouislabutongSubmitted over 2 years ago

  

  Responsive design using basic css with vite react js

  #vite#react

  1

  30
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 2 years ago

  Hey,

  • use div container and set max-width: 375px
  • use margin: 0 auto to center
  • change your strategy for mobile first. Then desktop. It seems easy to use.
  • use media query breakpoint at 768px or 640px

  html part is good. You can make better css by improving. I hope this might help you. Thank you.

  0
• 

  Jhonatan-Silva-Oliveira•20

  @Jhonatan-Silva-OliveiraSubmitted over 2 years ago

  

  Responsive landing page using CSS Display-flex

  1

  50
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 2 years ago

  Hi,

  What a nice strategy to handle this project! I appreciate the way you are writing css. Nice and easy to understand to anyone.

  • I personally use em and rem, even in padding and margin. But at the very beginning when I used rem, em, I had to struggle much, especially converting from px to rem or em. Then, I shrink the unit only 1 rem = 16px 1.25rem = 20px 1.5rem = 24px 1.75rem = 28px and 0.25rem = 4px 0.375rem = 6px 0.5rem = 8px and so on. I think you get the idea that I have use for simplicity.

  Hope this might help you. Thank you. Keep the good work on.

  Marked as helpful

  0
• 

  darkboldman•140

  @darkboldmanSubmitted over 2 years ago

  

  Huddle landing page with a single introductory section

  2

  20
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 2 years ago

  Hi,

  I have noticed that you missed the :hover effect on button and icons. You may add some color, transitions on hover state. Hope this might help you. The design also misses left and right spacing.

  main, header, footer{
  max-width: 1440px;
  width: 80%;
  margin: 0 auto;
  }
  

  Apart from that, rest of the section is good Keep the good work on.

  Thank you.

  Marked as helpful

  0
• 

  Felipe Salazar•140

  @andressalazar08Submitted over 2 years ago

  

  3 Column preview card component

  #accessibility

  1

  30
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 2 years ago

  Hmm,

  Great Works! You can do more stuff to improve the css. I have noticed that there is no hover effect in button.

  • Do some hover effect.
  • If you open browser's inspect element option and put the design around 768px, the bottom part of the design breaks.

  Hopes, this might help you.

  Apart from these, overall design is okay. Congratulation on that.

  Thanks.

  Marked as helpful

  0
• 

  Prayag Tandon•60

  @PrayagTandonSubmitted over 2 years ago

  

  Responsive Card-preview landing page Using HTML and CSS

  2

  20
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 2 years ago

  Hi,

  Your design looks good in mobile version. But in large screen desktop, the right side of design is not the same that should be. My suggestion is to add the following code in css:

  @media (min-width: 40em)
  .text-box {
      padding: 4.8rem 2.4rem 3.2rem;
      max-width: 350px;
  }
  

  The design is not fully responsive. You made some mistakes in applying flexbox stuff. Apart from this, overall design is great. Congratulation.

  Thanks.

  0
• 

  Lexsa•100

  @lexsacSubmitted over 2 years ago

  

  Responive Product Preview Card Using CSS Grid and Flexbox

  2

  10
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 2 years ago

  Hello, congratulations on completing this project successfully.

  Your query was how to use units in css. Well, there are two types of unit available in css. One is absolute unit and the other one is relative. If you design a responsive layout, you should go for relative unit. Both em and rem are relative unit based on parent and root font size respectively.

  • rem is the best for font-size.
  • bootstrap and tailwind use these relative units, even in margin and padding.

  NB: This does not mean that px is useless. Use it when you feel it.

  Thank you.

  Marked as helpful

  0
• 

  vishnu_suderson•100

  @vishnu-sudersonSubmitted over 2 years ago

  

  product preview card

  #webpack

  1

  20
  

  Mirza Monirul Alam•680

  @WebDevMirzaPosted over 2 years ago

  Hello,

  Good work on the very first project. I have noticed several issues though. But it can be mitigated. Some of my suggestions are as follows:

  • Use rem or em unit instead of % or px to make responsive design.
  • Your left alignment is not properly left aligned.
  • Do some hover effect on button for better user experience.
  • Keep focus on typography stuff.

  Your html has better readability. It is really nice to read through. Good Job on html and flexbox related stuff. Thank you.

  0