Skip to content
OverviewSolutions
4
Comments
3
MohammadAzmatAli
@MohammadAzmatAli

All comments

  • Razzak05•90
    @Razzak05Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    oflkjdfsd

    What challenges did you encounter, and how did you overcome them?

    kfjlsdkjfldsf

    What specific areas of your project would you like help with?

    kdnkdsffdjds

    Created Four Card Section using CSS GRID

    1
    MohammadAzmatAli•50
    @MohammadAzmatAliPosted 7 months ago

    You have done a great job @Razzak05. Here are some suggestions which i would suggest:

    1. The color of the fonts are different from the actual design which can be improved.
    2. The alignment of text inside the card is off according to the actual design. Use text-align: center only on the heading section not in the card.
    3. The padding in the card can be improved padding: 1.5rem adjust it accordingly.
    4. Lastly the font sized of heading element and paragraph element can be adjusted a bit more.

    Thats all, thank you...

    0
  • Heba Ahmad Saleh•230
    @hebaahmedsalehSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    i use mobile first style for responsiveness

    What challenges did you encounter, and how did you overcome them?

    it doesnt work perfectly with me

    What specific areas of your project would you like help with?

    Responsive product view card

    2
    MohammadAzmatAli•50
    @MohammadAzmatAliPosted 8 months ago

    You have done a great job. Here are some points which i would suggest :

    1. The size of the image and content will be same.
    2. The image you used in the desktop version is the image which will be used in the mobile version of the webpage. You can try this : <picture> <source media="(max-width: 460px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="images of the product">
    </picture>

    Change the source of the images accordingly. This section will help you to change the images based on the screen size.

    1. The font size of the price will be a bit bigger.

    I hope this helps.....

    Marked as helpful
    1
  • Iamtrieves•210
    @IamtrievesSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    For the first time i am working with clamp, i wouldn't say it was easy but for starters, i am proud of what i have done, there is plenty of room for improvement needless to say.

    What challenges did you encounter, and how did you overcome them?

    I came across alot of challenges, very little ones but they posed big red flags to my work. How to fit all elements in the container tag, having them shrink and grow as the parent container scales up and down and i wanted to strictly adhere to rwd which includes %, em, rem, clamp and what have you.

    What specific areas of your project would you like help with?

    Gosh, i would need help in making projects more responsive, shrinking font sizes using clamp, images using object-fit, and general rwd.

    Product Preview Card

    1
    MohammadAzmatAli•50
    @MohammadAzmatAliPosted 8 months ago

    We all learn and improve ourselves. I think you have done a pretty good job. The only thing i would say is that you can reduce the size of the main container element which contains both the images and the details. Other than that everything is good.

    0