Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Four Card Feature Section page Responsive using HTML and CSS

@SoniBasant

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@wdelanoy

Posted

I've started naming my custom properties a little bit more generic. For example, instead of using '--primary-red' maybe name it '--primary-team-builder'. That way if you ever want to change the color away from red, it becomes less confusing for others who will be accessing your code

I also think you are nesting divs to deeply. Your nesting is 5 layers deep. I think that is unnecessary. Take a look at my code. I'm only nesting 3 layers deep.

For the header - main>header>content (h1, p) For the cards - main>div>content (h2, p, svg)

1

@SoniBasant

Posted

@wdelanoy thanks for the feedback.

For the custom properties, I thought to keep it same as it given. But your point is good. So I will try to improve names.

As for the nesting is concern, I did it to make elements flexible for responsiveness. To make certain element responsive while keeping some others at normal, I had to nest them to keep them separate. But I will try to make them not too deep.

I saw your code and project page as well. When I was watching it in Developer's tool, and check for responsiveness at different screen width, then the page was not flexible. If you can make the page responsive with 3 layer deep nesting, I will be so happy to learn how to do that. I mean who wants to write extra lines of codes and then style and maintain them.

It is a learning process to write clean and crisp code while achieving all targets. (Semantic, responsive, accessibility and don't know what else)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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