Responsive four card page with HTML CSS (Flexbox-Grid)

Hi @ToprakPehleeone,

Nice project! Here are a couple of suggestions to improve it further:

Heading Hierarchy: I noticed a bit of an issue with your <h1>, <h2>, and <h3> tags. Remember that headings should be used in order of importance, with only one <h1> per page. This structure helps screen readers and Google’s search engine better understand your site.

Avoid Excessive Divs: Try to avoid using <div>s when possible. Instead, use more semantic elements like <article> or structure your cards and components with Flexbox for cleaner, more maintainable code.

Responsiveness: Your page isn’t responsive yet. I highly recommend using Chrome DevTools to check how your site looks across different screen widths (from 320px to 1440px). A mobile-first approach, using rem or em for units, will make responsiveness easier to manage. Also, avoid setting fixed heights—use min/max-widths for better flexibility.

Keep up the good work!

Best, Teodor

Nice one 😀

If you are curious how you can do this straight lines on the top of each card here is my tip:

Create another element in each of the cards. Then position this element absolute. Card should be positioned relative. At the end you need to give this element a height of 3px width of 100% and top 0 and left 0. You can also use ::after or ::before pseudo elements to create these.

Hope you found this comment helpful 💗

Good job and keep going 😁😊😉