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

3 column preview card component

@momolajnef1

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I loved working on this project. This is the best css code I have written so far. I tried my best to make a good Semantic HTML Structure. Is there anything that I need to improve?

Community feedback

@gregoriofrancisco99

Posted

Greetings, pal! You solution looks really fine, even on mobile. Although there’s a little points where we could improve.

Saw your html, and If it was me, I shouldn’t had a div to contain everything, while I already have the main tag.

The h1 tag is a level one heading and there should be only one per page. I noticed you have a couple ones in your code. Because you’re using a section tag, it should be preferable to change it for a h2, because section tags are usually followed by level two heading, a.k.a. h2. You can read more about it HERE.

To hold the icons, one of the best practices should be to link them to your document using a img tag, instead of an empty div.

Finally, I would strongly recommend to use an a tag, instead of button. Because, on my way of thinking, the page should take the user to other page, or other panel.

Well, those are my suggestion. Hope I was able to help. And remember... Keep coding 💻

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