Skip to content
Submitted 3 months ago

Results summary component css and html

yuval nisim•420
@nisimi96
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

i am learning every day new thing can't lie its was so difficult but we manage to finish it

i added couple animation to desktop screen and some animation to the mobile screen so this is something you have to check out

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

position was one of my problem cause i have don't different positioning method and got stuck on the media views and couldn't make it work so i went through the position lessons again and had to understand the different between grid and flex

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

grids and flex to know better the using of both and know when i want to use one over the other

Community feedback

  • Sara Dunlop•430
    @RiscloverPosted 3 months ago

    Hi! So in regards to using grid vs. flex, the more you get used to working with CSS, the more you'll have an instinct for which one to use. In general though, grid can be used for the overall presentation of the web page whilst flex box sets the layout within the components. In reality they are probably being used interchangeably by most developers.

    The name grid should give you a hint - generally it's most useful when you need an actual grid. Flexbox is useful for a lot of other positioning techniques (like aligning arbitrary numbers of items or such)

    (You can also use grid and flexbox together, eg. grid for main layout, and flexbox for positioning individual items inside your grid cells)

    EDIT: In regards to this project specifically, I would use grid for the 4 boxes on the right side (Reaction, Memory, etc) because it's a literal 1x4 grid.

    However, I would use flex for the elements inside of these boxes, specifically aligning them with align-items: center to make sure they're centered horizontally, and justify-content: space-between so that the icon and title are on one side and the number ratio is on the other.

    The left side of the app (the side with the blue background), I'd personally use flex for that as well - flex-direction: column to make the elements vertical instead of horizontal, and justify-content: center to make them centered.

    Let me know if you have any questions!

    Marked as helpful
    0
    yuval nisim•420
    @nisimi96Posted 3 months ago

    @Risclover Hi Sara,

    Thank you so much for the great tips! Your explanation of using grid and flexbox is really clear, and your advice for the project is super helpful.

    It's good to know I can reach out if I have more questions, but I totally respect your privacy as well.

    Thanks again, and have a wonderful day!

    Best, Yuval

    0

Please log in to post a comment

Log in with GitHub

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