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 - Layout using grid

Hari Ram 370

@hariramjp777

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


This is a page containing feature section, done using css grid.

Any Feedback would be greatly appreciated.

Community feedback

Paz Spera 170

@pazspera

Posted

Hello, Hari! The layout looks good, one thing I noticed was that you were using general tags. For example, in the header you have the three lines with a p tag. One way to add semantic hierarchy to the code could be using an h1 for the second line and a h2 for the first. Having an h1 on each page helps with SEO and it's recommended.

Also, the use of dl, dt and dd on the cards surprised me, it wouldn't have occured me to use them that way. The implementation of the grid is simple and effective, the main thing I would look into is to add more specific tags to the code. Cool use of SASS, too! It's a great way get organized.

1

Hari Ram 370

@hariramjp777

Posted

@PazS33 Thanks for your feedback brother. My first choice were using h1 for the first and h2 for the second and p for the third. Then, I changed all to p since I'd some doubts on using headings in web pages.

I'll try to use headings, brother.

How about the use of dl on cards? Is it good?

1
Paz Spera 170

@pazspera

Posted

Yes, it's a good idea to use ids to add the different border colors, I used the same thing on my solution. For the cards you could try using a class "card" instead of a general div to have more specificity on your code. If you're coding a larger site you could be using divs for many other things. That way you can make sure that the styles you want for the cards only apply to the cards and not other divs

1

@mylesvallen

Posted

looks good, I'm about to start mine

1

Hari Ram 370

@hariramjp777

Posted

Thanks brother. I appreciate.

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