Frontend Development Workflow of Advice Generator App

Community feedback

• 

  tediko•6,700

  @tediko

  Posted about 1 year ago

  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!

  04

  Marked as helpful