Skip to content
OverviewSolutions
10
Comments
273
S MD suleman
@sulemaan7070

All comments

  • S MD suleman•3,510
    @sulemaan7070

    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
  • S MD suleman•3,510
    @sulemaan7070

    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😄

  • S MD suleman•3,510
    @sulemaan7070

    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
  • S MD suleman•3,510
    @sulemaan7070

    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
  • S MD suleman•3,510
    @sulemaan7070

    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

  • S MD suleman•3,510
    @sulemaan7070

    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😄✅👍🏻

  • S MD suleman•3,510
    @sulemaan7070

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

    1.As for design, you did a great job!! functionality vise you can add more validation to the site...

    case 1.when I am clicking on confirm button without filling in any input fields only the card holder name input field is showing a validation message.

    case2.when I am entering text in only card holder name and clicking on the confirm button only the card number is showing the validation error... when every other element should show the validation error.. hope you will fix these

    2.I think you forgot to add the / between the mm / yy on the card..

    Everything else is great!! hope that helps, happy coding💯🔥👍🏻

    Marked as helpful
  • S MD suleman•3,510
    @sulemaan7070

    hey Kiran kumar😄, I have inspected your code and as for the blur I see you have added the class

    .blur_background {
  background-color: hsla(240, 100%, 5%, 0.3);
}🚫

    to achieve the blur effect you can use the backdrop-filter property..

    .blur_background {
  background-color: hsla(240, 100%, 5%, 0.3);
  backdrop-filter: blur(3px);✅
}

    2.As for your second concern I have played around with the code to center items in the last part of the grid

    .block_01 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1em;
}

    play around with the image size to match the site with the design..

    Hope that helps, happy coding✅😄👍🏻

    Marked as helpful
  • S MD suleman•3,510
    @sulemaan7070

    hey anass sanba😄, you made a super cool site.. loved the dark mode transition... here are a few things you can do to make it better..

    1.The mobile menu which you named as .menu is positioned absolutely... if I open the mobile menu and scroll it down it is scrollable.. to tackle that issue you can use

    .menu {
    position: fixed; 
}

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

    Everything else is superb!! happy coding💯👍🏻✅

    Marked as helpful
  • S MD suleman•3,510
    @sulemaan7070

    hey Jerico😄, here are a few things to make the site design accurate..

    1.Add shadows to the grid sections.

    2.In the grid1 there should be quote svg which should be positioned absolutely to the grid1.

    3.reduce the border-radius for the sections or divs.

    4.center the whole container. by adding height to the main

    main {
    min-height: 100vh;
}

    this has worked give it a try

    Happy coding👍🏻😄💯

    Marked as helpful
  • S MD suleman•3,510
    @sulemaan7070

    hey Camilo Martinez Campos😄, great job on completing the challenge!! you did well in both styling and functionality...I only thing I noticed which is not a good user experience is

    when I try to enter the card number like 1234567812345678 it is not accepting as a valid number.. I recommend you to use the Regex for this input to convert the 1234567812345678 to 1234 5678 1234 5678 let me know if you need help with the regex

    Happy coding✅💯👍🏻

  • S MD suleman•3,510
    @sulemaan7070

    hey brspkts😄, great job! here are a few suggestions to make the site better..

    1.the images on your site seems stretched or squeezed to fix that you can add the property of object-fit:contain.

    img{
object-fit:contain;
}

    to make all the images contained.

    2.Make the .navbar positioned fixed like this

    @media (max-width: 712px)
.navbar {
    position: fixed;
}

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

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

    hope that helps, happy coding💯🔥👍🏻

  • S MD suleman•3,510
    @sulemaan7070

    hey Eman Ibrahim you did an awesome job!! regarding both functionality and the styling! I recommend you to change the styling for the button when it is hovered... when I hover on the button it is giving the feeling that it is disabled.. instead of what you did you can certainly play with the scale property of the button on hover!!

    Happy coding✅😄

    Marked as helpful
  • S MD suleman•3,510
    @sulemaan7070

    hey Florvin Bayaborda😄 great job!! everything looks great .. I suggest you add the box-shadow for the buttons like add to cart and check out buttons...

      box-shadow: 0 0.3125rem 0.625rem -0.125rem hsl(26deg 100% 55%);

    that should make you site design accurate!!

    Happy coding😄✅✅

    Marked as helpful
  • S MD suleman•3,510
    @sulemaan7070

    hey @WDSYX😄, great job!! you made a neat site..

    here is what you asked, the custom input radio button make sure you play around with it

    For the custom radio-button you can do something like this to acheive that

    .negotiate input[type="radio"] {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid var(--Dark-Grayish-Violet);
  border-radius: 50%;
  outline: none;
  box-shadow: 0 0 5px 0px gray inset;
}
.negotiate input[type="radio"]:checked {
  background: var(--White);
}

    let me know if you need further help, happy coding✅😄💯

  • S MD suleman•3,510
    @sulemaan7070

    hey Karen Lourenço😄, great job on completing the challenge...here are a few tips to make your site better..

    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.Using the picture element for responsively switching between Images is considered as best practice

    <picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

    more about picture element here📚

    3.This is your code

    
.menu ul {
    position: absolute;
}

    I recommend you to use the position :fixed property so that the user cannot scroll it down..

    4.you site is still on the desktop version for the images with large screens..you can co some modifications..

    Hope that helps, happy coding✅✅😄

    Marked as helpful
  • S MD suleman•3,510
    @sulemaan7070

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

    1.As for design, you did a great job!! functionality vise you can add more validation to the site...

    case 1.when I am clicking on confirm button without filling in any input fields only the card holder name input field is showing a validation message.

    case2.when I am entering text in only card holder name and click on the confirm button only the card number is showing the validation error... when every other element should show the validation error.. hope you will fix these

    2.and as for the validation messages write the error message and use the CSS property

    display:invisble to make them invisible and when needed make them display:block this should solve the problem of page resizing frequently

    Hope that helps happy coding💯✅😄

  • S MD suleman•3,510
    @sulemaan7070

    hey Tobi Idowu😄, great job on completing the challenge...

    1.I see that you have made the mobile-menu absolutely positioned but the user can open the menu and scroll.. and it will go up.. to tackle that issue you can use the position:fixed property.

    2.you can make the header or nav bar sticky.. so that it stays stuck on the top on the mobile version..

    Happy coding👍🏻💯✅