Four Card Feature Section Solution [HTML + CSS, Grid]

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello there! 🙋🏽‍♂️

  Your solution looks excellent!

  I have a suggestion about your code that might interest you:

  📌 If you don't have the Figma design files, I recommend using a browser extension called Perfect Pixel.

  It allows you to compare your finished project with the design images that come along when you download the project and check the (almost exact) dimensions. It's very useful!

  I hope it helps you in future projects! 😊

  Other than that, great job!

  Marked as helpful

  1

  ---

  

  Faruq Abdul Hakim•580

  @faruqAbdulHakimPosted 10 months ago

  @danielmrz-dev Hi Daniel, thanks for your suggestion. Yeah, I already installed the Perfect Pixel extension before, and I agree with you it's really helpful. Hope your suggestion also reach other developer here. 😀

  1
• 

  Petrit Nuredini•2,860

  @petritnurediniPosted 10 months ago

  Congratulations on completing the Four Card Feature Section project! It's fantastic to see your hard work and dedication paying off. Here are a few suggestions to further enhance your project:

  1. Consistent Font Sizing:

     • Your header uses multiple font sizes (36px and 15px). It's good practice to maintain a consistent font size hierarchy for better readability. Consider adjusting the font size of the first paragraph in the header to make it slightly smaller than the main heading. This will help create a clear visual hierarchy on the page. Check out this guide on typographic hierarchy.

  2. Responsive Design:

     • You've done well with media queries, but there's room for improvement. As the screen width reduces, the content in the cards might feel cramped. Consider increasing the padding inside the cards for smaller screens to ensure the content has enough breathing space. Here's a useful resource on responsive design.

  3. Accessibility and Semantic HTML:

     • Your use of semantic HTML is good, but ensure that all interactive elements are accessible. For example, if you plan to make the cards clickable, use <a> tags or <button> with appropriate ARIA roles. This ensures that the site is navigable and accessible to all users, including those using screen readers. Learn more about accessibility at Web Accessibility Initiative (WAI).

  Keep up the fantastic work! Remember, every project you complete brings you one step closer to mastering web development. Your progress is commendable, and I'm excited to see what you create next. Keep pushing your boundaries and happy coding! 🚀💻

  0