Mobile First Landing page using Flexbox & Grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hello, Rom! 👋

  Congratulations on finishing this challenge! 🎉

  Here are some suggestions for improvements.

  • First, I would suggest writing your code in a consistent format. It will make it easier for you and other people to read your code. You can actually use a code-formatter like Prettier to format your code automatically.
  • The download buttons should be links with download attribute.
  • There should not be text in span and div alone whenever possible. Instead, wrap the text with a meaningful element like a paragraph element.
  • The <div class="links"> should be a list that contains five bullet points. Also, if you think that it is a link then it should be wrapped by an anchor tag (not a div). The same goes for social media icons.
  • The page content that is wrapped by aside is not complementary content. It is the main content of the page. So, I suggest swapping the aside with div instead.
  • I would recommend setting the body font size with rem unit. Setting the body font size to 62.5% and then using em to define the font size for the other elements can be tricky. It's because em size will depend on the font size of the nearest parent element. It means that 1em can be different for each element. As a result, it will make it harder for you to debug the font size.

  That's it! I hope this helps! 🙂

  Marked as helpful

  1

  ---

  

  Rom•780

  @RomWeb3Posted about 2 years ago

  @vanzasetia Really helpful mate, thanks a lot !

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @RomWeb3 Happy to hear that was helpful! 😊

  0
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi Rom, well done, especially on the responsiveness! I think Vanza gave you some excellent pointers already, so I'll just mention one thing I noticed:

  At your mobile view until the breakpoint, the company logos are all stretched and not in their aspect ratios. I don't know if you're seeing that either, but in any case, you can try removing the height property from .partner to fix it. To be safe I would also add object-fit: contain in case you later decide to make other changes.

  Great work here on the whole!

  Marked as helpful

  0