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

Mobile first using grid "Four card feature section".

@hagureshinma

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


Any improvement feedback will be appreciated.

Community feedback

Szymon Rojek 4,540

@SzymonRojek

Posted

Hi Hagureshinma,

Very nice solution, I like your RWD and effect on :hover :D

I have checked your HTML, a few tips from me:

  • the text at the top it will be good to put inside of the header tag;
  • under the header you can create the main tag and inside these 4 divs;
  • using two h1 it is not a good practice, only one per page => also we can not skip the headings, we have to put them gradually;
  • I think you don't have to use ul > li between 4 boxes, split them => one div for each box;
  • inside of these div you can use the h2 and paragraph plus img;
  • I'd recommend learning BEM naming convention (at the moment your classes are not readable and descriptive);
  • add transition on :hover.

Greetings :D

1

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