3 columns responsive design

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, @Parthib45! 👋

  Congratulations on finishing this challenge! 👏

  There is some feedback on this solution from me.

  • All the icons are decorative images so my recommendation is to leave the alt="" empty. This way, those icons are hidden from screen reader users.
  • Every page should only contain one h1. So, I recommend using h2 instead which can be used multiple times throughout the webpage.
  • Use CSS to uppercase the text. The uppercased word in the HTML might be spelled by the screen reader (spelled letter by letter).
  • I think those "Learn More" buttons would be link elements instead of button elements. As a user, I would expect if I click one of those buttons, I would get navigated to another webpage. So, what do you think is going to happen after you click the button?
  • I would highly suggest using either px or rem (recommended) for margin and padding rather vh unless you have a good reason to use viewport units.
  • Always use classes to reference all the elements that you want to style. Using id is going to make your stylesheet have high specificity (hard to maintain).
  • I suggest making the responsiveness as simple as possible. So, there are only two layout models. First, a one-column layout, and the second, is a three-column layout. It's because having two column layout makes the last card in a "weird" position. So, I recommend making it a one-column layout and after it has enough room for a three-column layout then make it into the three-column layout.
  • Fix the border-radius for the card on mobile view. There should be only a border-radius on the first and last card element.

  That's it! Hope this helps.

  0
• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  • card is not properly centered
  • your border radius are uneven on smaller device.

  Besides good job there👍 Happy coding👍

  0