Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 2 years ago

ARTICLE PREVIEW COMP đŸŽ¯ [ ACCESSIBLE - BEM - VANILLA CSS3 - ES6 ]

accessibility, bem, lighthouse
Abdul Khaliq 🚀â€ĸ72,360
@0xabdulkhaliq
A solution to the Article preview component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


👾 Hello, Frontend Mentor Community,

This is my solution for the Article Preview Component.

  • Scored 98.65% on Google Pagespeed Insights! 🤩
  • Solution with 99.9 Percent Accuracy đŸŽ¯
  • Used Prettier code formatter to ensure unified code format âš™ī¸
  • Layout was built responsive via mobile first workflow approach 📲
  • Had a lots of fun while building this challenge ! 🤠
  • Feel free to leave any feedback and help me to improve my solution 💡

Questions :

  • The Largest Contentfull Paint (LCP) has showing error, There is no indications about why it's arising and affecting the performance score. For more details check out this report
  • And the color combinations for font's are not enough, they causes accessibility issues. Can anyone know any web apps for checking right color contrast to improve accessibility?
  • These two are the primary questions arises for me, feedbacks regarding these stuffs are greatly welcomed!

.

👨‍đŸ”Ŧ Follow me in my journey to finish all newbie challenges to explore solutions with custom features and tweaks

Ill be happy to hear any feedback and advice !

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Abdul Khaliq 🚀's solution.

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
Š Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License