Skip to content
Submitted about 1 month ago

Four Card Feature Section

Andres Lamar•300
@AndresLamar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Kamran Kiani•1,280
    @kaamiikPosted about 1 month ago

    Hi. congrats for doing this challenge. I have some notes I wanna mention:

    1. header tag is come after your body and out of main tag. It's mainly for your logo and nav items. So here in this challenge I think you don't need header. This should be your structure if you have header and footer:
    <body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

    1. For span inside the h1: The better option is to use strong tag. It's more semantic.

    2. I'm afraid using section and article is true here or not. I think It's not. It's simply a card that can be div or ul with li is an option too IMO.

    Good Luck!

    0
  • Egnodia•100
    @EgnodiaPosted about 1 month ago

    Hey, fantastic effort on this! You’re really nailing it. Just a few things I noticed that could make it even better…

    For future project, You could download and host your own fonts using @font-face improves website performance by reducing external requests, provides more control over font usage, ensures consistency across browsers, enhances offline availability, and avoids potential issues if third-party font services become unavailable. A place to get .woff2 fonts

    I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details BEM

    Amazing work using the at using SaSS.

    I hope you found this advice helpful! Keep up the great work, You’re doing amazing, and I can’t wait to see what you create next. Happy coding! 🚀

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord