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

Fylo landing page using scss

Dineshβ€’ 1,115

@Dinesh1042

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


Feedback are requested😍

Community feedback

P
tedikoβ€’ 6,580

@tediko

Posted

Hello, Dinesh! πŸ‘‹

Congratulations on finishing another challenge! Again, good job! I see that you followed my last suggestions, great! What I can hint you this time is:

  • Since you wrap your logo into anchor change your alternative (alt) text to be more descriptive. Change it to something like - 'Fylo - homepage'.
  • Your hero__img and productive__image images are decorative so your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies, such as screen readers.
  • Instead of putting image of quotes in .testimonial HTML what you can do is to use pseudo element ::before on your .testimonial element. Set it to position: relative and your pseudo element as position: absolute. Put your image using content: url('image.jpg').

Good luck with that, have fun coding! πŸ’ͺ

1

Dineshβ€’ 1,115

@Dinesh1042

Posted

@tediko Thank you for your feedback! 😊

  • I will make sure to use alt tag more descriptive.
  • If I ignored hero__img and productive__image images alt tag frontendmentor validation is gonna yell at me. So I have used alt in images tag but in real world scenario I will make sure to ignore these alt in the decorative images.
  • Putting quote image in the pseudo element ::before is an awesome idea. I will change it to that.

Thanks, Happy Coding.😊

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