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

HTML, CSS/Sass,JavaScript

Gassai Hamza• 290

@GHamza-Dev

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Getting started with Sass

  • Any suggestions are welcomed and appreciated :)

Community feedback

Vanza Setia• 27,855

@vanzasetia

Posted

👋Hi Gassai Hamza!

I have some feedback on this solution:

  • For any decorative images, you should leave the alt="" empty and add aria-hidden="true" to make all screen readers ignore those images. In this case, all images except the logo are decorative images.
  • Always avoid inline styling. It's a bad practice and cause a lot of specificity issues. Put all your styling on your CSS file (in this case your Scss file).
  • Also, you don't need JavaScript to validate the email input in this challenge. Just use the native validation and :invalid pseudo-class to show the alert message.
  • Use rem or sometimes em instead of px. Using px make the users can't control the size of this page based on their needs. Create Sass function that will convert px to rem.

That's it! Hopefully this is helpful!

Marked as helpful

1

Gassai Hamza• 290

@GHamza-Dev

Posted

@vanzasetia

  • Thank you so much Vanza Setia! it's very helpfullllllll
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