Mobile First Four Card Feature Section Using HTML and CSS(Flexbox)

Hi @didyouseekyng

Sure, here are some pointers for you

• you can only have one h1 per page. I would probably take the two you have and combine them into one (with spans wrapping each part for styling)
• the image tags shouldn't be in figure elements
• how you've done this with flexbox is fine, but it would be better to use css grid if possible. This is a perfect challenge for it.
• change the base font size on the body not html element
• you don't need a min-width of 375px on those cards. Even max-width of that might not be necessary. I would give them one max-width value thats relevant for all screen sizes (no min width) or just control their size with css grid if using that
• personally I find some of your class names really difficult to understand. Mainly ones like first child second child etc. Those are confusing names because of the pseudo properties in css I think. Nth child means a direct child... So I recommend changing those
• does font weight 280 exist? Same with 290. I don't think those are right.
• try not to use pixels for font sizes. Use rems instead. I'd also use rems for min/max widths too, not ems. Do you understand the difference between these?

I hope this is helpful ☺

@grace-snow Thanks so much Grace, I'm not sure I would've spotted these bad habits all by myself, I would really love to keep in touch with you, and about my class names, I know I really have to work on that 😂😂 I really struggle with naming classes, so do you think I'd have to learn the BEM naming methodology? Believe me I actually tried using grid with the cards but It was quite challenging so I opted for Flexbox instead, guess I'll have to try it again using Grid, I love me a challenge. Honestly I'm still struggling with the CSS relative units I should practice using in my code, now that you've mentioned it, I'll definitely work on all these pointers, I really appreciate the time you've spent analysing my code, If only I could be your apprentice I wouldn't mind 😄