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-master

Cristian 80

@DevCris05

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


What are you most proud of, and what would you do differently next time?

me llena de orgullo el poder completar los desafíos que se me van dando y de la misma manera el poder desarrollar mis habilidades

What challenges did you encounter, and how did you overcome them?

al momento de poner los iconos de las tarjetas al lado derecho y al momento de hacer uso de la grilla

What specific areas of your project would you like help with?

en cualquier área, acepto cualquier comentario o sugerencia que me ayude a mejorar :)

Community feedback

P

@srijanss

Posted

Congrats for completing the challenge.

  • I really liked how you've used grid-row and grid-column to layout the sections to match the desktop design. You can also try using grid-template-areas, it does the same thing but it's more elegant and you can visually see which component goes where in the DOM. You can further read about it in this really helpful interactive guide to CSS Grid https://www.joshwcomeau.com/css/interactive-guide-to-grid/
  • You can also use semantic HTML elements like <section> to add the content to the page, rather than using <div> which is mostly used for styling and gives no info about the content.

It was really good solution. Keep it up.

Marked as helpful

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