Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile First Landing page using Flexbox & Grid

Rom 780

@RomWeb3

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback on it ? I would love to read any advice :)

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

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

@RomWeb3

Posted

@vanzasetia Really helpful mate, thanks a lot !

0
Vanza Setia 27,795

@vanzasetia

Posted

@RomWeb3 Happy to hear that was helpful! 😊

0
Elaine 11,400

@elaineleung

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord