Four card feature section master mobile-display workflow first
Design comparison
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
- @hitmorecodePosted over 1 year ago
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 helpful1
Please log in to post a comment
Log in with GitHubJoin 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