Skip to content
OverviewSolutions
10
Comments
273

S MD suleman

@sulemaan70703,510 points

A passionate developer who loves to code the Front-end💓

I’m currently learning...

React tailwind

Latest solutions

View more solutions

Latest comments

  • S MD suleman•3,510
    @sulemaan7070Posted about 2 years ago

    hey Roberto Ramirez😄, great job completing this challenge!! and yes this one should be intermediate level if we consider the form validation and CSS positioning... I have a suggestion for you

    1.limit the number of characters to 2 in the MM and YY fields and 3 in the case of CVC.

    1. Limit the number of characters to be accepted as input to 16 in case of card number

    bonus📚

    I recommend you to add the regex to convert this number 1234567812345678 to this 1234 5678 1234 5678

    Happy coding😄👍🏻✅

    Marked as helpful
    1
  • S MD suleman•3,510
    @sulemaan7070Posted about 2 years ago

    hey Kamal Osama😄, I have visited your site and here are a few tips to improve your site..

    1.on the desktop version: I suggest you to increase the size of input fields along with the size of cards..

    2.give the input fields a little more border-radius...

    3.limit the number of characters to 2 in the MM and YY fields and 3 in the case of CVC.

    1. Limit the number of characters to be accepted as input to 16 in case of card number

    bonus

    I recommend you to add the regex to convert this card number 1234567812345678 to this 1234 5678 1234 5678

    Everything else looks great !! happy coding😄

    1
  • S MD suleman•3,510
    @sulemaan7070Posted about 2 years ago

    hey angel lam😄, the best way you can make responsive sites is by using the mobile first approach more about it here

    as for the error popping up in the above accessibility report , it is because you have used the nav for 2 times.. if you want to use the nav for 2 times you can do this

    <nav aria-label="Main navigation">
</nav>

<nav aria-label="Secondary navigation">
</nav>

    Everything else looks great!! happy coding👍🏻✅

    Marked as helpful
    0
  • S MD suleman•3,510
    @sulemaan7070Posted about 2 years ago

    hey Gabriel Gusso😄, great job here are a few tips for you.

    1.I see that you have applied only the desktop-image on both the desktop and the mobile versions.. you will find the image-hero-mobile in the images folder.. you can responsively change the image based on the media-query..

    2.You can use picture element here which helps you to switch between the images based on the media-query.. more about picture element here📚

    3.Increase the font-size for the h1 on the desktop version to match the design..

    hope that helps, happy coding💯🔥👍🏻

    Marked as helpful
    1
  • S MD suleman•3,510
    @sulemaan7070Posted about 2 years ago

    hey Blair Chappell, great job here are some tips to help you improve the site..

    1.I see that you have applied only the desktop-image on both the desktop and the mobile versions.. you will find the image-web3-mobile in the images folder.. you can responsively change the image based on the media-query..

    2.You can use picture element here which helps you to switch between the images based on the media-query.. more about picture element here📚

    3.The hamburger menu is not aligned with all the mobile sizes.. and it doesn't seem to be working on click...

    if you really want to get good at react you can pick challenges with intermediate level of difficulty

    The transitions are the best part of your site great job!! happy coding

    0
  • S MD suleman•3,510
    @sulemaan7070Posted about 2 years ago

    hey 😄zohaib, congratulations on completing the challenge... here are a few tips to make your site better.

    1.For the mobile menu which you gave class name of .navhid you can add the

    @media (max-width: 400px)
.navhid {
    position: fixed;
}

    so that the mobile menu stays on the screen even when the user scrolls down..

    2.Add an overlay in the background when mobile-menu is opened.. more about the overlay here📚

    3.You can use picture element here which helps you to switch between the images based on the inbuillt media query.. more about picture element here📚

    every thing else looks great, happy coding😄✅👍🏻

    0
View more comments