Frontend Development Workflow of Advice Generator App

Hi @tloxiu!

Congrats on completing your next challenge! A little feedback from me:

• .dice-icon div element should be replaced with button tag. Buttons trigger some action, such as drawing next advice in your case.
• .dice-img image is purely decorative. You should remove alt text from that image since it doesn't add information to the content of a page. Instead add aria-label="generate next advice" to your button to inform users that use some form of assistive technology what kind of behaviour they can expect.
• Instead of putting image within your button, try to use ::before pseudo-element to add this image to button element.
• You shouldn't put two images into your HTML and remove one with display: none property. It will cause performance issues since both images need to load on each screen size. Instead use <picture> HTML element for responsive images. This element allow to display identical image content, just larger or smaller depending on the device. This helps to improve performance across different devices.
• Don't set explicitly width on your .card container. Let your content decide how much space it need. It will make your container more responsive. Use max-width instead to say how big it can grow. Add this to your card: max-width: 33.8rem; width: 100%;
• Now you have to add padding to your body since your container want to stretch full screen width. Add something like padding: 1rem.

Good luck!