Skip to content
OverviewSolutions
6
Comments
4
Linas
@getlinas

All comments

  • Shahin Aliyarli•680
    @sliyarliSubmitted about 1 year ago

    Hello fellow designers and developers,

    I'm thrilled to present to you my solution for the Product Preview Card Component challenge on Frontend Mentor. As a passionate front-end web developer with years of experience, I've put my skills to the test to create a visually appealing and functional product preview card. Now, I'm seeking your valuable feedback to make it even better. Could you please take a moment to answer the following questions?

    • Design Charm: What aspects of the product card's design do you find visually captivating? Feel free to share your thoughts on the color palette, typography, arrangement, and any other design elements that caught your eye.

    • Navigation Ease: While interacting with the card, did you encounter any challenges in terms of navigation? If you did, I'd greatly appreciate it if you could elaborate on the difficulties you faced. This will enable me to identify any user experience hurdles.

    • Impressive Features: Were there any specific features or functionalities in the card that you found particularly useful or innovative? Your insights into what resonated with you in terms of interactivity and user engagement would be tremendously valuable.

    • User Experience Boost: In terms of user experience, what suggestions do you have to enhance the card's usability? Whether it's about optimizing the layout, improving the responsiveness, or refining the information flow, I'm eager to hear your thoughts.

    • Performance Evaluation: How would you rate the performance of the product card in terms of loading speed and responsiveness? Did you notice any delays or inconsistencies while testing it on different devices? Your feedback on performance will contribute to a seamless user experience.

    • Areas for Advancement: Were there any areas where you believe further enhancements could be made? Whether it's about refining the product details, fine-tuning animations, or any other aspect, your insights are highly valued.

    I genuinely appreciate your input as it will guide me in refining this product preview card to meet the highest standards. Feel free to share your thoughts openly, and if you have additional comments or suggestions beyond the questions listed above, please don't hesitate to share them.

    Thank you for taking the time to review my solution. Your feedback is incredibly valuable, and I'm excited to learn from your perspectives.

    Product preview card component

    1
    Linas•100
    @getlinasPosted about 1 year ago

    Hey man, nicely done!

    I've noticed that you're still using desktop image for mobile version of design. I don't have much experience yet and not sure about best practices, but I've recently learned a neat trick that seemed to be worth trying here (because of 2 different images that Frontend Mentor provided with files).

    You also also check my code, I've just submitted same exercise. In short, I've used <picture> tag in HTML to set 2 different images depending on media rules. Here is that part of code, you might want to check that out:

    <picture>
  <source media="(max-width: 799px)" srcset="images/image-product-mobile.jpg">
  <source media="(min-width: 800px)" srcset="images/image-product-desktop.jpg">
  <img class="image" src="images/image-product-mobile.jpg" alt="">
</picture>

    Good luck!

    Marked as helpful
    2
  • Linas•100
    @getlinasPosted about 1 year ago

    Hey man, you're using margin to center container, but it looks off on different browsers/computers then yours. You should use "flex" for that. Looks it up or can check my code, I 've just submitted same exercise.

    Basically, you can center any object inside of it's parent by setting these properties to your container:

    .mainclass-container { display: flex; justify-content: center; align-items: center;

    }

    Check what it does (don't forget to remove margins).

    Also, desktop version should start showing way sooner then 1440px width. It file Frontend Mentor says that design was made with 1440px wide screen in mind, but it's not a breaking point.

    Good luck! :)

    0
  • Linas•100
    @getlinasPosted over 1 year ago

    Despite some visual inaccuracy, I would suggest to try adding extra space between image, text elements and bottom of the container. This requires extra steps that you skipped. Might be good to explore it further :)

    0
  • Salvador Guerra•10
    @SalvadorGuerra777Submitted over 1 year ago

    My question is how to make a qr code like a take all the section in the card without affect the text, because when i modificate the dimensions qr code or image, the text was down and go out the card. thanks ...

    Card with QR code using Html and Css

    2
    Linas•100
    @getlinasPosted over 1 year ago

    Hi. You don't have to specify exact dimensions for image. Only set size for white container, then set image to take up 100% width of the container. I added padding later to get white border around image, but despite that image takes up 100% of width

    div#qr { padding: 15px; }

    img#qr-image { width: 100%; }

    Basically just these 2 rules set image in right place, then adds padding/border around image and text elements.

    Marked as helpful
    0