Responsive two pager with form using vanilla JS and SASS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hey, Éric Férole! 👋

  Congratulations on finishing this challenge! 🎉

  I won't recommend separating the CSS unless you have a good reason to do it. Since you are using Sass, I recommend organizing the Sass files instead. And, yeah, you can use the "7-1 architecture" approach to structure your Sass files.

  I have some feedback on this solution.

  • Remove the word "logo" from the alternative text for the logo. Avoid having any words that are related to the word "image" whenever you are writing the alternative text for images. The semantic meaning of the img element is already enough.
  • Not every image needs alt text. If the image does not provide any meaningful content, such as an illustration, consider using empty alt text (alt=””). This saves your screen reader users time as they navigate the page.
  • There should not be text in span and div alone whenever possible. Instead, wrap the text with a meaningful element like a paragraph element.
  • Always specify the type of the button. It will prevent the button from behaving unexpectedly.
  • In your CSS, I noticed this selector .cards .card__header .card__description which would much be as .card__description . I recommend only nesting when you want to style pseudo-elements, pseudo-classes (:hover, :focus, etc), and @media queries. It's a good practice to keep the CSS specificity as low and flat as possible. High specificity will make your stylesheet hard to maintain.

  I hope this helps! Happy coding! 😄

  1