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

@prajwal18

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


Can someone review my work and give feedback, best practices, how you would do certain aspects differently. Any feedback would be highly appreciated.

Community feedback

@MarlonPassos-git

Posted

good job, it was very similar to the original version, but everything can improve more

  • Your page could have broken down to 2 columns earlier, so this is kind of weird, see https://prnt.sc/1stmr0u

  • Each of the cards is actually a link to another area of the site, so in this case it would be nice if they were inside an <a> tag and that there was an effect when the muse passes over it

  • The <div class="header"> should be inside a <header> tag and only the cards inside the <main> tag

  • In this case the images of the cards are there more for decoration, in this case it is not necessary to give a description in the alt, it could just be an alt=""

  • Increase the size of the H2 a little

  • Decrease the shadow of the cards a little, it looks very strong

  • Images should have explicit width and height, see https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=devtools#images-without-dimensions

Marked as helpful

1

@prajwal18

Posted

@MarlonPassos-git I have noted it down, i'll implement it on the next iteration

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