The most challenging part was how i can make the choices to appear without losing their style, this took me a little time i think bcuz im a beginner and i got a lot to learn, but i did my research and overcome the challenge. and also this is my first responsive design
What specific areas of your project would you like help with?I need help with the responsiveness cuz im new to it
Hey your design looks nice on small devices
I'm most proud of achieving a clean, responsive layout that adapts well to different screen sizes. I also kept my CSS organized and avoided using unnecessary code. Next time, I would focus more on accessibility and performance optimization, such as using more semantic tags and reducing image file size.
What challenges did you encounter, and how did you overcome them?One of the main challenges was getting the layout to work correctly on both mobile and desktop screens. I overcame this by starting with a mobile-first approach and using media queries to adjust the layout for larger screens. Another challenge was ensuring that the text and button spacing matched the design closely, which I resolved by adjusting paddings and margins carefully.
What specific areas of your project would you like help with?I need help with the image not displaying on the live site. It shows up locally, but when I deploy it, the product image does not appear. I'm not sure if it's a file path issue or something else. Any suggestions to fix this would be appreciated.
You have set the wrong path for your image in the repository. Just remove "images/" from src <img src="images/image-product-desktop.jpg" alt="Gabrielle Essence Eau De Parfum bottle" /> I think you uploaded all these files by drag and drop, not by git cmd.
I'm most proud of how closely the final layout matches the original design. Seeing the result look almost identical to the Figma prototype was very rewarding. Next time, I would like to plan my layout structure more carefully in the beginning to minimize adjustments later on.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was fine-tuning padding and margin values so that the layout aligned precisely with the design. I overcame this by using Figma's inspect tool more effectively and adjusting spacing step-by-step while constantly comparing it with the reference.
What specific areas of your project would you like help with?I would really appreciate feedback on my overall workflow when translating a design into code. Are there any best practices or steps I should follow to make the process smoother and more efficient?
Your page is nice, and the code can be reused.
This was a fun little project. I learned something new, which was the ::marker pseudo-elements that helped me style the bullet points and numbers in the lists.
What challenges did you encounter, and how did you overcome them?I was having difficulty styling the table in the nutrition section. I don't use tables that much, but I kept at it until I got it right.
What specific areas of your project would you like help with?For some reason, the numbers in my ordered list did not display the font style that they were supposed to. I didn't try to solve the problem because all the other numbers on the page were taking the font style. Future problem, I suppose.
you can remove unnecessary bottom line from last table row which is not in design
.card__contact{ width: 330px; padding: 1.3rem 1rem 1.3rem 1rem; ;/Remove this extra semicolon at line 90/ }
Hello sir, I think you that you could use gap instead of margins to a consistent spacing between text elements
You can increase the width of the .card component to 300px
I would appreciate any feedback about my code.
Amazing design bro👍
How to make my solution closer to the provided example and make it appear consistent accross all devices
Hello, you can center it very easily using body{ height: 100vh; display: flex; align-items: center; justify-content: center; } this would center all the child elements of the body tag, and you can also adjust font-size for headings to match the design. And your code is very minimalistic means you can easily make changes to this design.
