Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
socket hang up
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

ARTICLE PREVIEW COMP 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 - ES6 ]

#accessibility#bem#lighthouse

@0xabdulkhalid

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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 !

Community feedback

P

@thomaserdmenger

Posted

As always, an amazing solution.

To check the color contrasts I can recommend this page: https://coolors.co/contrast-checker/112a46-acc8e5

Best regards Thomas

Marked as helpful

1

@0xabdulkhalid

Posted

Glad to hear your compliments and the resource you shared was very helpful @thomaserdmenger!

0
Daniel 🛸 38,070

@danielmrz-dev

Posted

I'm struggling to do that button, so I started checking people in the community that had finished this challenge.

I took a look at your solution and I find it great. Then checked the code. I'm looking at the code right now and I still have no idea how you did it 😂

I have a long run...

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