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

Stats-preview-card-component-main Css Flexbox-Grid

yanlsama 170

@yanlsama

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello everyone 🤓💻, I'm Yaniv and this is my solution for the challenge #7

built with :

  1. Grid.
  2. Flex-box.

I learned a lot about the use of after and before, especially to give color to the image.

Thanks!💖

Community feedback

P
Alper 1,010

@adonmez04

Posted

Hi, @yanlsama. It's a good solution. Keep coding. I have some suggestions for you.

1 - You can use <strong> tags instead of <p> tags in card__texts__grid area. They'll add more semantic meaning to your webpage. Also, you can wrap <section> tag instead of <div> tag to card__container area because this is part of your main area so you can use <section> tag. And you don't need to give a class name to your main tag because it's a unique area in your webpage, you won't use main tag again on this page.

2 - You can focus on the simple solution. Yes, we can use grid and flex properties in each other but I recommend using grid for pages' general layout and using flex for 1-dimension flows. Keep it simple, focus on simple solutions and improve your coding skills.

I hope these'll help you to improve your perspective. Keep coding. All the best.

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