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

Community feedback

• 

  P

  Teodor Jenkler•3,760

  @TedJenklerPosted 2 months ago

  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

  Marked as helpful

  0

  ---

  

  Toprak Pehlivan•140

  @ToprakPehleeonePosted 2 months ago

  @TedJenkler

  Thank you so much for very helpful feedback! I will update the code according to your suggestions. :)

  1
• 

  MikDra1•6,960

  @MikDra1Posted 2 months ago

  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 😁😊😉

  Marked as helpful

  0