Skip to content
OverviewSolutions
13
Comments
4
Rachid Ben
@rachidbend

All comments

  • Mahmoud Tarek•670
    @mahmoudAcmSubmitted about 1 year ago

    🚀 Just wrapped up an incredible learning journey diving into the world of app routing in Next.js! 🌐 Each day brought new and exciting challenges, and I must say, this recent challenge was quite the delightful ride. 💡

    Compared to some of the other tasks I've tackled, this one felt a bit easier. But hey, that's the magic of learning and growing – each step forward prepares us for the next adventure. 📈

    Throughout my projects, I've held onto a strong focus on user accessibility and those tiny details that really make an app come alive. It's amazing how caring about the little things can have such a big impact on the overall experience. 🌈

    If anyone's curious and up for it, I've opened up my code for a little peek. Feedback is like gold to me, so feel free to dive in and share your thoughts. And hey, if you're working on something similar, don't hesitate to ask me about my experiences. Learning is all about the journey together! 🌟

    Check out my code on GitHub: mahmoudAcm/frontend-mentor

    And don't miss the live site: Ecommerce Product Page

    Responsive Ecommerce product page with localStorage.

    1
    Rachid Ben•370
    @rachidbendPosted about 1 year ago

    I love how you made it functional as if it's part of a larger website, and the 'Pages are under development' touch. It looks so close to the design in the desktop view, well done. I have two small nitpicks, when you hover over the large image, there is no indication that it's clickable, maybe add a 'cursor: pointer' to it, and in the mobile view you restrict the height of the images, which warps them, a suggestion is to allow them to grow in height as well to keep the same aspect ratio. You did a splendid job, keep going, and good luck. 😁

    2
  • lem31•30
    @lem31Submitted over 1 year ago

    I found it quite difficult to align some of the text, mainly the prices.

    I was unable to align them as it is in the design and I tried using margins and padding but neither worked.

    It also took me quite a while to figure out how to make the page responsive. However, I believe I finally figured that out and did a good job. I ended up having to make a separate code for all sections for mobile and desktop in HTML. This made it a lot easier to style the content in CSS.

    Responsive Product Card Page using CSS, Html and Java

    1
    Rachid Ben•370
    @rachidbendPosted over 1 year ago

    Hi, great work by the way, in the start it can be difficult to know how you can do something but we still have to try.

    I think a great thing to learn is how to separate a design into multiple components which can help quite a bit in styling it, for example, you put the image everything in a box because that part can be a component, but instead of writing the rest into a paragraph, you could have split them, you could have put 'PERFUME' into an <h3> or another paragraph by itself, the put the title below it into an <h1> tag, and the paragraph into a <p> element instead of putting them all in a single <p> element and splitting them with <span> and <br>, you would have not needed them anyways. basically try to think of what are the parts in a design, and if they should be put into a single tag (like how the image and the rest of the text are inside the box element) or separated into multiple tags (like how the title should be in a <h1> tag by itself).

    i see that you wrote two different versions in the HTML, but here's another way you could have implemented it using CSS grid, inside the box element, put the image inside a <div>, and the rest of the text into another div next to the first, and use CSS grid on the box (display: grid) and (grid-template-columns: 1fr 1fr) so that it each would take half of the box, and in the media query, bellow 700px for example or wherever you want to see it, add this style on the box (grid-template-columns: 1fr)(grid-template-rows: 1fr 1fr) to change their placements, then you wouldn't need to use HTML for the mobile, you can do it in CSS only.

    sorry if this was too much or unclear, and if you want to see a code example of what I said I can provide it. good luck.

    Marked as helpful
    0
  • Rachid Ben•370
    @rachidbendPosted over 1 year ago

    looks like it's working properly, well done. But just as a tip, use Figma or Adobe XD, put the design image in it, and use it to figure out the font sizes, margins, heights, widths, gaps, line heights and anything else you may need, it can be quite helpful in getting your website looking as close to the original design as possible, but if you can't get them to match perfectly it's ok, just get them as close as possible, other than that you're doing great, keep going and good luck in your journey.

    Marked as helpful
    1
  • Rachid Ben•370
    @rachidbendPosted over 1 year ago

    when you reset or load the page the first time, the numbers in the bill and the number of people should not be set from the start, they should be empty, to not let the user have to change them, but let them put the numbers themselves. other than that, Great job.

    Marked as helpful
    0