@tiagocostarebelo
Posted
Hello @ownedbyanonymous,
First, well done on submitting and pushing yourself to learn and improve.
A few things I've noticed in your code:
-
Replace <div> with a <button> where a button is intended. This improves both semantics and accessibility. Also, ensure all interactive elements are keyboard-accessible and screen reader-friendly.
-
Your <picture> element contains two sources and one img. Check the documentation on the MDN. You only need one.
-
For a faster workflow, explore CSS custom properties and how to set/use them. This will streamline your workflow and make your code cleaner.
-
You are setting the width of your article (which seems to be your card container) to 40vw, which I believe is causing issues with the desktop version. A simpler approach would be setting the width to 100% and then a max-width to the desired value, like 600px or 700px. This will improve the scalability and responsiveness of the card. The same applies to height values.
-
I also advise against adding width to <p> elements. The parent containers should handle that, not the element itself.
Hope this helps. Keep up the good work!
Best regards, Tiago
