Submitted 8 days ago

Four Card Feature Section

Andres Lamar• 150

@AndresLamar

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Kamran Kiani• 900

@kaamiik

Posted 7 days ago

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

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>

For span inside the h1: The better option is to use strong tag. It's more semantic.
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!

Egnodia• 80

@Egnodia

Posted 8 days 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! 🚀

Please log in to post a comment

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