Skip to content
Submitted 9 months ago

My first Frontend.io Challenge: Crafting a Perfume Design Replica

EmmanuelKeziah•10
@EmmanuelKeziah
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Questions for Feedback:

  1. Color Choices Dilemma: I faced challenges in selecting and blending colors effectively for my perfume design. Any tips on refining color choices and creating harmonious combinations for an eye-catching result?

  2. Cart Icon Conundrum: Adding the elusive "cart icon" to my design proved to be a puzzle. Can you share guidance or code snippets for seamlessly integrating a cart icon into a webpage?

  3. Responsive Design Mystery: I'm grappling with making my design responsive across various screen sizes. What best practices or techniques do you recommend for crafting a layout that adapts beautifully to both desktop and mobile devices?

I welcome any insights, corrections, or solutions to these hurdles. Your valuable feedback will greatly aid my learning journey. Thank you for your support.

Community feedback

  • Ibrahim AbdElwahab•390
    @iabdwahabPosted 9 months ago

    Hello, @EmmanuelKeziah !

    • You can find colors of designs in style-guide.md file in starter file you downloaded.
    • You can add cart icon with Add to Cart text by wrapping it with <button> element. This an example of it: <button><img src="icon-src">Add to Cart</button>.
    • I'm using media query to make websites responsive. You can search about it in google or YouTube.
    • Last point: You should put link of your solution in the Frontend Mentor, not repo link.

    I hope this helped you.

    Keep going! Your job will be improved by training.

    Marked as helpful
    0
    EmmanuelKeziah•10
    @EmmanuelKeziahPosted 9 months ago

    Hi, @iabdwahab

    Thank you for your valuable feedback! I appreciate your guidance. I'll make the necessary corrections and follow your suggestions. However, I'm still a bit unclear about the process of posting the link to the solution on Frontend Mentor. Could you please provide more details? I'm relatively new to this, and I encountered many difficulties while attempting to upload the solution.

    0
    Ibrahim AbdElwahab•390
    @iabdwahabPosted 9 months ago

    @EmmanuelKeziah!

    Check this article; it will provide you with infromation about it.

    Don't give up. All of great developers starts with no knowledge, but they didn't give up; so they become great.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord