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

Four Card Feature Section

Darkstar 1,000

@DarkstarXDD

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone! 👋

  • Started learning React recently so did this one with react. Created a component for the Card, and passed in the data for each card using props.
  • Started using Lighthouse. I sometimes get 100% and sometimes it shows 99%. I read that it's not consistent and can give different results for the same code. Also I get some errors when I run it on a browser that has chrome extensions installed. So I try it either on incognito mode or on pageSpeed Insights.
  • I used a different font color for the paragraph texts, since the color given in the style-guide did not pass the contrast check. Other than that I tried to match everything to the provided design.

Question

  • I wanted to make this a PWA and I added the necessary features to the code. And I passed the PWA check when I ran Lighthouse on the localhost site.
  • But when I deployed the site to Vercel, it doesn't pass the PWA. When I checked the Vercel deployment logs I found that Vercel doesn't copy the PWA icon images I had in my icons folder, to the assets folder Vercel creates when deploying the project.
  • I tried putting my icons folder in the public directory. But it still doesn't work.
  • Everything works well when I try on the locally hosted site. But on Vercel it breaks.

If someone can help me with it I would appreciate it so much. Thanks!

Community feedback

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