Skip to content
OverviewSolutions
8
Comments
14
Kartar Developer
@kartardeveloper

All comments

  • Kartar Developer•360
    @kartardeveloperPosted about 2 years ago

    Hey Farhan, You did Great. If you need some improvements I will help you with this. Here are some suggestions -- 1). First of all what catches my eye is your card shadow. Great, you can try different from the challenge. But I say you use but use lighter shadow now its too hard. You can take shadow codes from there https://getcssscan.com/css-box-shadow-examples 2). Next, You can increase your heading size and make the description text a little bit lighter as in the reference. 3). Always wrap your images in a figure HTML element. Add image widths there and use height, and width 100% on your images. And object-fit property if you want to use it. Object fit CSS property is very helpful when er dealing with images. This is the same as we add background size to our background images. If you want more on object-fit and object position then you can comment to me I will definitely tell you. 4). Last but not least as @MelvinAguilar said. Use semantic tags in your code. It will help you and other developers to see and find something in your code easily. Everything else is looking good. I hope this will help you. If you find this comment helpful for you, then you can mark this as a helpful comment. It will increase my confidence. 😊 And If you need any help then I'm always there.👍

    Marked as helpful
    0
  • Kartar Developer•360
    @kartardeveloperPosted about 2 years ago

    Hey Mohamed Shawgi, You did Great. But as you said you need more improvements to achieve the design you want. And if you need some improvements I will help you with this. Here are some suggestions -- 1). First of all you can use max-width and width CSS properties to give as much width as you want and if you use max-width it will also help in making our webpage responsive. 2). Next, if you want to center your entire card, then you can use display: flex; align-items: center; justify-content: center; properties on your card's parent element. That is the one way. Another way is a little bit complicated if you want to know that you can comment to me, and I will definitely answer it and help you in improving your skills. 3). You can use the cursor: pointer; on your buttons so that the user can easily catch it. This will increase the overall user experience on your webpage. And you can use the same font family on your button so that it looks beautiful as our other content looks. 4). You can use the grid on your main container instead of flex because we are creating a layout there. And grid helps you in creating the most appealing layouts. But if you want to use flex then you can it's not the big issue. But in flex you need to add width in its child elements, in the grid, we don't need to do it. 4). Last but not least spacing in your cards. You can decrease this by using simple padding properly on your cards. Everything else is looking good. I hope this will help you. If you find this comment helpful for you, then you can mark this as a helpful comment. It will increase my confidence. 😊 And If you need any help then I'm always there.👍

    Marked as helpful
    0
  • Kartar Developer•360
    @kartardeveloperPosted about 2 years ago

    Hey Beshoy, You did Great. But if you need some improvements I will help you with this. Here are some suggestions -- 1). You can use the line-height CSS property to give a space between text lines. Now the gap is too narrow. Now the text is looking a little bit ugly and messed up. After giving the gap you can see the changes. 2). Responsive is good. But you can increase your card width by a little in your mobile design. 3). You can use max-width and width properties on your card so that it will automatically be responsive on mobile. Everything else is looking good. I hope this will help you. If you need any help then I'm always there.👍

    0
  • Kartar Developer•360
    @kartardeveloperPosted about 2 years ago

    Hey Ali, You did a Great. But if you need some improvements I will help you with this. Here are some suggestions -- 1). You can increase your overall font size. Now it looks too small and hard to read. I hope this will help you. If you need any help then I'm always there.👍

    1
  • dragouwu•90
    @dragouwuSubmitted about 2 years ago

    This is my third project here and I enjoy it a lot. I had no problems in this project but at the end when i tried to do hover effects I had no problem with text but I couldn't pull of the image hover, because when I tried it i searched a lot about image hovers but I just couldn't implement it into my project here. The view eye was always not opacity 1 when background had to be opacity less than 1 and I couldnt use it only on the image so I had to do another container which I could size properly to the image. I would really like to know how to handle it if someone knows. Any type of critique is appreciated. Thank you :)

    NFT preview card component

    1
    Kartar Developer•360
    @kartardeveloperPosted about 2 years ago

    Hey Drago, You did a great job. I really appreciate your solution to this challenge. The card is good, Responsive is good. Everything looks good.👌

    Marked as helpful
    0
  • Kartar Developer•360
    @kartardeveloperPosted about 2 years ago

    Hey Vishnu, You did a Great. But if you need some improvements I will help you with this. Here are some suggestions -- 1). Don't use width and height on your card as you did. Use max-width: 700px; and width: 100%; and use min-height instead of height. 2). You can use the letter-spacing CSS property to add space between letters in px. I hope this will help you. If you need any help then I'm always there.👍

    Marked as helpful
    0
  • Kartar Developer•360
    @kartardeveloperPosted about 2 years ago

    Hey Justin, You did a Great. But if you need some improvements I will help you with this. Here are some suggestions -- 1). You can increase your left heading font size and fix line height according to font size. 2). You can use input type submit for submitting the form and cursor: pointer; CSS property on your submit button. Everything else is looking good. I hope this will help you. If you need any help then I'm always there.👍

    Marked as helpful
    1
  • Kartar Developer•360
    @kartardeveloperPosted about 2 years ago

    Hey Yinx, You did a Great. But if you need some improvements I will help you with this. Here are some suggestions -- 1). You can decrease the shadow of the card. For shadow, you can use this website https://getcssscan.com/css-box-shadow-examples just copy and paste from there. 2). Your body background color is missing. 3). Your heading text and other text are not perfectly visible because of color contrast. You can use white color there for more contrast. Colors play a very important role in the website. It makes your webpage alive. I hope this will help you. If you need any help then I'm always there.👍

    0
  • Canice•80
    @Canice10Submitted about 2 years ago

    I'm still having some issues with centering the main component card perfectly. Please I'll appreciate the community's feedback on this project.

    Thank you.

    3-column preview card component

    2
    Kartar Developer•360
    @kartardeveloperPosted about 2 years ago

    Hey Canice, You did great! Some things that you can improve -- 1). Add a transition on button so that the animation looks smooth. 2). You can replace font-size with transform: scale(1.2); on button hover. The other looks good! Hope this will help you. 👍

    0
  • Kartar Developer•360
    @kartardeveloperPosted about 2 years ago

    Hey Geovanny, Everything looks great except for some spaces and sizes. The space between the product title and description is too large you can decrease it and the quantity selector is too big. Quantity selector icons are too big. You can improve it more. I hope this will help you. If you need any help I'm always there. Best of luck with your next challenge. 👍

    1
  • shikoto•1,010
    @shikot0Submitted about 2 years ago

    This was my first attempt at making a product page, so a lot of the different components are new to me and might not be the best. So if you have any feedback please leave a comment.

    Ecommerce product page with Vanillas JavaScript

    1
    Kartar Developer•360
    @kartardeveloperPosted about 2 years ago

    Hey Shikoto, nice work man! You did great. I mention some things that you missed and never good for the user experience -- 1). When you clear the cart you should remove the number from the cart also. 2). In your responsive design you hide product thumb images which are ok but if you show this user can directly jump to those images that he wants to see as you did on the desktop by just clicking on that image. I hope this will help you! Best of luck with your next challenge! 👍

    Marked as helpful
    1
  • Kartar Developer•360
    @kartardeveloperPosted about 2 years ago

    Hey Marco, you did a great job. Simply add before pseudo selector on your eye image parent element and add opacity and background color there. Add opacity 1 there on hover. Simply add yourElement:hover::before. It won't affect your eye image. I hope you understand and it will help you. Best of luck with your next challenge. 👍

    Marked as helpful
    0