Responsive landing page using CSS Grid and JS

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted almost 4 years ago

  Hey, great work on this one. Layout is great on desktop, it is responsive and the mobile layout looks great as well.

  Fidel Lim already gave some great tips on this one, just going to add some suggestions as well:

  • Person's img should be using the person's name as the alt. In component like this when a person's image and name are both present, always make use of their name as alt.
  • Also I saw some usage of id as a selector, don't use this since it is a bad practice due to high css specificity, leave it to class for selecting elements.
  • li alone is not accessible for the selections. An interactive component needs to have interactive elements. On this one, you could either use button inside the li element, just make sure to add an aria-live element that announces a certain option is selected, since button alone is not informative enough. Another method is to use radio buttons in here, since it is a selection of only one choice right and radio buttons are great for those. It will be inside a fieldset along with a screen-reader only legend defining what is the purpose of the sets of radio buttons. This is much informative.
  • Those 6 cards could be sitting in a one whole grid instead of making 2 containers to wrap the top part and other one for the bottom part.
  • You could use a heading tag for each title of the card since they give overview on what the section is all about also you don't need to use header to wrap it, a div would be fine.
  • Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag, so hide the 3 dots.

  Aside from those, really great work on this.

  11

  Marked as helpful
• 

  Fidel Lim•2,775

  @fidellim

  Posted almost 4 years ago

  Hi!

  Well done finishing the project! Looks great for both desktop and mobile views. Just one suggestion I would like to share is that you could add some margin to the component so that it has some space between the screen border and the component itself. Other than that, I think everything seems done well :) Hope it helps.

  00

  Marked as helpful