Welp, this project didn't go as smooth as I expected, but overall design is fine imo.
What specific areas of your project would you like help with?Image scaling and card sizing please!
ur code is looking great overall, but there are a few things you could tweak to make it even better. First off, the alt text for your images could be more descriptive. Instead of leaving the cart icon's alt text empty, try using something like "shopping cart icon" for better accessibility. For the perfume image, something like "Product image of Gabrielle Essence Eau De Parfum" would be more informative.
Also, it’s better to use a <button> element for the "Add to Cart" section instead of a div. This ensures proper interaction for screen readers and keyboard navigation, which is a simple change that can really improve accessibility.
When it comes to the prices, consider wrapping the current price in a <strong> tag and the old price in a <del> tag. This would make the discount clearer and provide better semantics.
In terms of your CSS, it’s always a good idea to have a full CSS reset to handle browser inconsistencies. You could also add fallback fonts in case Google Fonts don't load properly. Switching your mobile image to dynamically replace rather than using it as a background image would also be better for performance.
Lastly, you could use relative units like rem or em for font sizes, padding, and margins to improve responsiveness. And instead of repeating class names in your CSS, just combine them into one block for better readability.
Overall, the structure is solid, but with these small fixes, you’ll have a more accessible, performant, and maintainable codebase!
I can see a lot of thought went into the structure and styling of the recipe page. I like how you've used semantic HTML elements like <ul>, <ol>, and <table>, which make the content easy to read and accessible. The #main-container is well-centered, and the use of flexbox for aligning items shows good control over layout.
A couple of things I noticed that might be worth tweaking as you continue:
Font Preloads: You’ve included multiple preconnect tags for Google Fonts, which helps performance. You could consider combining the fonts in a single link element to reduce the number of HTTP requests.
HR Styling: The hr element is almost invisible due to the very light color. It might be worth giving it a slightly darker shade or more prominence, especially since it helps separate sections.
Responsiveness: The mobile responsiveness is coming along nicely. The only thing I’d suggest is paying a little more attention to padding and margin at smaller screen sizes. For example, the margin around #main-container gets removed on smaller screens, which makes it feel a bit cramped. Maybe add a small margin for better breathing room.
Consistent Font Sizes: The font sizes, particularly for headings, could be standardized or varied more intentionally. For instance, the font size of #title is quite large compared to other text, which might overwhelm smaller screens. Consider reducing the size for smaller devices in your media query.
Color Choices: The color scheme is warm and inviting, though some colors (like hsl(330, 100%, 98%) for the #preparation background) are quite light and may not provide enough contrast for readability. Increasing the contrast just a bit might improve legibility.
Overall, this is a great project that demonstrates solid frontend skills. As you refine the code and tweak minor details, I think you'll end up with a highly polished, professional-looking recipe page. Great work!
Your code structure is solid and follows modern best practices like the use of clamp() for responsive font sizing, hsl() for color values, and the universal selector (*) for resetting margins and paddings.
Guessing font size from an image with no code or anything else that helps
it would be so much better if you use the figma file for styling reference <3.
