P
@laurice-dev
Latest comments
- P@AnguiNator
Buen trabajo, solo falto colocar :hover en el botón para la versión de escritorio.
- P@NunoJDMachadoWhat specific areas of your project would you like help with?
I'd like to know if the approach using the <picture> elements is a valid one for this case or if there's a better way.
Also, when comparing with the design, the footer image didn't seem to be fitting exactly the same, even though I was using the correct one for each breakpoint and the footer size was the same. If someone could take a look it would be very much appreciated.
Other than that, any other feedback regarding other parts of the project is welcome. Thanks!
P@AnguiNator🔧 Empty alt attribute on the picture-hero-right image Suggestion: Even if the image is hidden at certain screen sizes, you shouldn’t leave the alt attribute empty in case the image does get displayed. Use a descriptive alt instead.
- P@AxaynP@AnguiNator
Great job! I really liked the way the files were organized
- P@braismarquez2025What are you most proud of, and what would you do differently next time?
Me ha gustado que he usado los text-presets de una forma mucho más cómoda añadiéndolos como una clase a los elementos, te ahorra mucho tiempo hacerlo así.
What challenges did you encounter, and how did you overcome them?He implementado la función clamp para el tamaño de la letra, de esta forma va aumentado según la resolución de la pantalla. Con una función que convierte los píxeles en rem he podido llevarlo a cabo.
What specific areas of your project would you like help with?Me gustaría recibir feedback sobre el uso de la función clamp y los rem sobre todo, además de cualquier mejora que pueda aprender e implementar.
P@AnguiNatorTypography utilities (text-preset-*) — great idea to standardize text styles for easy reusability.
Marked as helpful - @leonardo-bravopWhat are you most proud of, and what would you do differently next time?
It's my first time using SASS and I think I accomplished a good structure. I also learned about
What challenges did you encounter, and how did you overcome them?mixins, it seems really useful to standardize adding media queries. I also feel proud that I started mobile-first this time, and it was not hard to add responsiveness for desktop devices.I had some issues with the consistency of some styles like the margins and paddings when switching from one screen size to another, but after some tries I could make them work.
What specific areas of your project would you like help with?If you have experience using SASS it could really help me to know what I could improve, but feel free to give any comments in other areas too!
P@AnguiNatorSuggestions for improvement
-
Make alt text more descriptive (e.g., "Gabrielle Essence Eau De Parfum bottle") to improve accessibility.
-
Avoid using position: absolute for centering the .product-card. A better alternative is to use display: flex on the body: body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
-
Reduce repeated font declarations. You could create utility classes like .font-montserrat and .font-fraunces to keep your SCSS DRY.
-
Enhance accessibility for the button. Add an aria-label like "Add product to cart" to make it more screen-reader friendly.
Use the <picture> and <source> elements for switching images instead of injecting two <img> tags. Example: <picture> <source media="(min-width: 768px)" srcset="${desktopSrc}"> <img src="${mobileSrc}" alt="Gabrielle Essence Eau De Parfum bottle"> </picture>
Great work overall! With a few small tweaks, your project would be even stronger!
Marked as helpful -
- @HemantKumawat1729P@AnguiNator
<img> tag missing alt attribute 🔧 Suggestion: Add an alt attribute to improve accessibility and SEO.
<ol> element is not properly closed 🔧 Suggestion: Close the ordered list before the next section starts.Style reuse: You can optimize your CSS by grouping repeated properties into reusable classes (e.g., margin, color settings).
