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

HTML5, CSS3

Oliver 20

@oliversibin

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


FINISHED , I WILL LOVE THE FEEDBACK , I NEED TO WORK ON MOBILE VERSION ! :)

Community feedback

P

@nityagulati

Posted

Great work on the project, Oliver! The desktop version looks good. Next step would be to add media queries for the mobile version.

Here's a few suggestions after quickly going through your code --

  • Instead of using position: relative and float to position the card elements, you should use Flexbox or Grid. You can check out the tutorials from Wes Bos What the Flexbox?!.

  • Look up CSS naming conventions such as BEM to use more descriptive class names instead of generic div1 div2 etc. This helps in maintaining and scaling your code easily as well as debugging.

  • You can also read up on HTML5 semantic tags for laying out your HTML structure.

Happy Coding :)

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