Skip to content
OverviewSolutions
7
Comments
5
P

Alfie Mitchell

@alfiemitchell123Los Angeles, CA240 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

- React - HTML, CSS and JavaScript - Sass - Tailwind CSS - Material UI

Latest solutions

View more solutions

Latest comments

  • P
    Alfie Mitchell•240
    @alfiemitchell123Posted 4 months ago

    Functionally, this works great-the app flows smoothly, and everything works as it should. Next time, I would just spend more time on following the Figma design system, and creating a pixel-perfect layout. A lot of the spacing, colors and other elements don't align with how it looks. Using technologies like Sass is a good way to make a theme at the start of the project, and stick with it throughout. And Figma dev mode helps for this too.

    1
  • P
    Alfie Mitchell•240
    @alfiemitchell123Posted over 1 year ago

    Hi Oluwatoni,

    Great job so far. I personally used React for this project, but this particular challenge is quite complicated if you're new to it. I found it to be one of the most difficult coding challenges I've done so far. If you're really stuck, I find it useful to post your code into ChatGPT and give it a prompt such as 'how do I add cart functionality in pure JavaScript', for example. It won't complete the challenge for you, but it'll give you code snippets and step-by-step instructions that you can learn from.

    If you want to check out my code, here is a link to my completed challenge - https://www.frontendmentor.io/solutions/ecommerce-product-page-with-react-cFHbwSVxxM

    Good luck!

    0
  • P
    Alfie Mitchell•240
    @alfiemitchell123Posted over 1 year ago

    Great job with the solution! Your text layout issue might be because of the padding on the text div. Try removing the padding from .text and keeping the padding on the .card div. You can then set padding-top on the h1 and p tags to space them out.

    This may work, but apologies if not!

    .text {
    font-size: 15px;
}


.text h1 {
    padding-top: 10px;
    color: hsl(218, 44%, 22%);

}

.text p {
    padding-top: 10px;
    color: hsl(220, 15%, 55%);
}
    Marked as helpful
    0
  • P
    Alfie Mitchell•240
    @alfiemitchell123Posted over 1 year ago

    This looks great and responds well when you resize the browser. I only noticed a couple of minor issues with your solution -

    • On the mobile site, the menu toggle icon shows the sidebar and the close icon is displayed. When you do this for a second time, the close icon is no longer shown, and you are unable to close out of the sidebar. I had a look over your code, and I'm not sure exactly what the root of the issue is. I've attached a screen recording below (via WeTransfer) to show this.
    • The second regards your coding structure. I would recommend separating your CSS and JS from your HTML by writing these languages in their own files and referencing them in the HTML document. This makes it a lot easier for anyone to read and debug your code.

    Screen Recording

    Marked as helpful
    0
  • P
    Alfie Mitchell•240
    @alfiemitchell123Posted over 1 year ago

    Well executed and looks great, but I did notice an issue with the cart feature. It's hard to explain the issue in writing, so I have attached a screen recording via WeTransfer. I think the problem is with state management, though I am fairly new to this as well, so I wouldn't know exactly how to fix it!

    The cart icon in the top-right corner updates when you add an item to it, but it only mimics the number of items added when you click 'Add to cart' and doesn't add any additional items on top of what it already has (if that makes sense?)

    Screen Recording

    Marked as helpful
    0