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 master mobile-display workflow first

NugyTomas 220

@NugyTomas

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


It was tought for me to come up with the soluction to have the cards placed in "plus" layout, but after some time I figured it out. Here I trained building the mobile-view site first and this was really helpful with exercising grid and flexbox! Happy coding yall :).

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Congratulations well done. I was looking through your html and CSS. In your markup you have multiples h1's. This is actually not the best practice. Each page should only contain one h1.

Using only one H1 header on a page is best practice for several reasons:

1 Search engines use H1 tags to determine the main topic of a webpage, so using multiple H1 tags can confuse search engines and harm your page's SEO.

2 H1 tags are typically used to indicate the main heading of a webpage, so using multiple H1 tags can create confusion for users as to the main topic of the page.

3 Additionally, using only one H1 tag on a page allows you to be more specific and descriptive with your heading, which can improve the user experience.

It is important to note that while only one H1 tag is recommended, you can use multiple H2-H6 tags to structure your content and provide clear headings for different sections of your page.

If you look closer to the top bar of each card, you can see that there is a small border radius. This is because you used border-top. You can fix this by adding an empty div, give it a height, width and background-color. After that give the top left and top right a border radius and it will look exactly like the design.

Marked as helpful

1

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