Frontend Development Workflow of Advice Generator App

Community feedback

• 

  P

  tediko•6,680

  @tedikoPosted 9 months 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!

  Marked as helpful

  0

  ---

  

  Roksana•330

  @tloxiuPosted 9 months ago

  Thanks for feedback, I will implement the changes! :) @tediko

  0

  

  Roksana•330

  @tloxiuPosted 9 months ago

  I've made changes, I'd love to hear your opinion on the changes @tediko

  0

  

  P

  tediko•6,680

  @tedikoPosted 9 months ago

  @tloxiu

  Are you on discord? Would be easier to talk it through.

  0

  

  Roksana•330

  @tloxiuPosted 9 months ago

  Yes, I am - "tlox." - I'm at frontend mentor server too @tediko

  0