The debugging process, picture tag for diff images in different viewports, box-sizing: border-box importance, use different flex-direction for different screens, letter spacing, border-raduis on differnt sides top,right,bottom,left
Great work! The main thing I noticed was that the Name and price of the perfume should be in a different font family. Apart from that you're good to go!
Not bad! I think the main problem is that you didn't use semantic html elements. Check mozilla developer network and web.dev for some more information
Good work! Try adding the main background color to the body element to get rid of the excess white space at the bottom. Good luck!
Writing the code without a figma design
What challenges did you encounter, and how did you overcome them?Navigating pixel sizes with just a JPG file
What specific areas of your project would you like help with?Any review will be appreciated
Nice work! You're version should have more padding above the the image and below the Instagram link though. Also, I noticed you changed the name and location from the design. If you were trying to personalise it, you may as well have changed the image. Apart from those two, you're good.
De usar Flex
What challenges did you encounter, and how did you overcome them?Usar Flex y ajustarlo a la imagen
What specific areas of your project would you like help with?con css
Nice job overall! I think the major problem why your solution is bigger than the original design is you didn't adjust the image size given to you. Give it a CSS class and adjust it's width - for example, width: 300px - and see how it goes.
What I'm most proud of:
-Use of Flexbox for Layout: I'm really proud of how I implemented Flexbox to center the QR code and text. It was my first time using Flexbox extensively for layout, and it made the component fully responsive across different screen sizes.
-Simplified HTML and CSS: I kept the code clean and simple, avoiding unnecessary complexity while still achieving the desired outcome. This reflects the principles of good web development by writing readable and maintainable code.
What I would do differently next time:
-Optimizing Images for Web: Next time, I would focus more on optimizing images for faster load times. The QR code image could be compressed to reduce its size without losing much quality, improving performance, especially on slower networks.
-More Complex Layouts: While this was a relatively simple layout, I would challenge myself to incorporate more advanced CSS techniques, such as CSS Grid or custom animations, to make the project more engaging and dynamic.
What challenges did you encounter, and how did you overcome them?I was unable to place the image properly inside the border. But with enough searching on the internet, I found out the object-fit: cover; method to fix it
What specific areas of your project would you like help with?One area I didn’t focus on in this project was implementing shadows, and I would love some feedback on how to add and style shadows effectively. How can I implement subtle box shadows to enhance the design of the QR code and the card container without overdoing it? Are there any tips or best practices for using shadows in a way that adds depth while keeping the design clean and modern? I appreciate any suggestions or examples!
I'm new to this, so I can't help too much with the areas you requested like shadows. However, I can see that your qr code image has a blue border which shouldn't be there. Well done!
