Stats Preview Card using HTML+CSS (Grid)

Hi Azmi, thanks for sharing your solution! I'm not great at giving praise, WIP, but overall I think you've shown that you can figure out how to solve a problem, turning design into code. I'll take a bit of time trying to share concepts of how you can solve it better, hope it's somewhat useful 😅. I tend to overshare, sorry in advance.

Height and avoiding pixel-perfection

Height is an odd one. I don't recommend using height for anything as it leads to an older way of thinking about CSS, when 'pixel-perfect' sizing was sought. As time passed a very generic screen most people had became a big question mark for the developer as screens started deafferenting in sizes, browsers were added and different browsers supported different things and a website all of a sudden had to fit a 49" display as well as an iPhone SE.

So why should height be avoided? Imagine if you have a paragraph with content and you set the height to 50px. As soon as your width runs out because the screen is too small the content (text) will overflow. This break the user experience and makes us look bad, so lets avoid that.

Instead, if you really want to use height use min-height instead. Min height will guarantee that your containers are responsive to the content they have if the screen gets too small for their particular widths. It could be an element with a min-width of 200px or 600px, it doesn't matter.

Ultimately the point is to let the content dictate the size of the container. Because then it's responsive.

*I'm sharing this video not to promote anything but to share concepts (I made this video for another FEM 'student'): have a watch if you're interested in how we can achieve this design, almost pixel perfect, without setting heights: link. *

I'd love to do a video outlining these fundamental concepts but I'm lacking time this month 😫

"Containing" Content

This should be a simple one. We basically want to structure our HTML in a similar way as the design suggests. This is open for interpretation of course but lets see if we can agree on something:

The card (.container) has 2 parts. Top and bottom and in tablet/desktop left and right. We can go 1 step further and call these 'sections' of the card.

One part is .info-content and the other could be .img-container.

Our grid becomes simpler then. We either have 2 rows and 1 column in mobile or 2 columns and 1 row in tablet +.

Our text-content becomes a simple flex-container that is styled to be a column.

Would you agree that this is a simpler approach or do you think I'm adding complexity? I personally think it's simpler. It's easier to focus on 1 part of code (lets say .info-content) instead of looking at the various individual elements within our grid. The code would look something like this:

<div class="container">
     <section class="info-content">
              <h1 class="info-content__heading">...</h1>
              <p class="info-content__key-points">Discover the bene...........</p>
              /* remaining code */
     </section>
     <section class="img-container">
            <img ....>
     </section>
</div>

Here I'm just showing an example of how you can structure this. You might have noticed I used <h1>, <p> instead of <span>. This is because <span> is used to 'style' text. It is not meant to be used for every single text-element you have. A more typical approach to use span is this:

<p> 
     I am a paragraph! <span>I am some styled text that looks 
     different but is a part of the paragraph! </span> 
</p>

My approach of course makes your grid infinitely simpler.

.container {
    grid: 
         "img" min-content
         "info" min-content / 1fr;
   /* 
    you can read the above as :

    grid:
         "grid-template-area" row-height (row1)
         "grid-template-area" row-height (row2) / grid-template-columns;
   */
}

And of course do similar for tablet/desktop.

I have a ton of other suggestions but perhaps, PERHAPS, you can watch the video of my solution and just observe some things I did differently. Or just ask other questions here "how can I..." etc.

If you have any questions I'm happy to respond to them. Here or on Youtube, or w/e works for you. I'm running out of time and I could continue for hours as I'm sort of fascinated with the most efficient ways of achieving things whilst leaving all code very readable.