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

Three Column Preview - Responsive

BryanCarlosβ€’ 80

@BryanCarlos

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'm trying to learn how to use the mobile first. Fell free to comment something that I can improve!

Ty!!

Community feedback

Vanza Setiaβ€’ 27,795

@vanzasetia

Posted

Hi, BryanCarlos! πŸ‘‹

I recommend adjusting the size of the cards. Based on the design comparison, the cards are bigger compared to the design. Try to make the site looks as close as possible to the design.

Replace all the <h1> with <h2>. There should not be more than one h1 on a page. Many <h1> elements mean many titles which can confuse the users, especially the screen reader users.

The buttons do not need to be wrapped by a <div>. You should remove them.

The "Learn more" buttons should not be <button> elements. If you think that the users will get navigated to another page when they click one of those buttons, then you should use <a> elements instead.

Never use px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting. Learn more β€” Why you should never use px to set font-size in CSS

I hope this helps. Happy coding! πŸ˜„

Marked as helpful

0
Francisco Carrilloβ€’ 5,540

@frank-itachi

Posted

Hello there πŸ‘‹. You did a good job!

I have some suggestions about your code that might interest you.

HTML πŸ“„:

  • Wrap the page's whole main content in the <main> tag.
  • If your code has different sections that have a specific purpose like articles , sections or footer, it’s a good practice to enclose those parts with HTML5 semantic tags. For example, you could wrap the <div class="attribution">' inside the <footer>` tag.

CSS🎨:

  • Avoid using absolute length units px, especially for font-size and width properties, because they are not relative to anything else so that means they will always be the same size. Instead, you can use relative lengths like em or rem. The benefit of that last one is element which has that unit will scale relatively to everything else within the page, e.g., the parent container. You can dig up about it here
  • You can also use the text-transform: uppercase; property to make the sedans word e.g. appear in upper case even though you typed it lower cause in the HTML file.

I hope you find it useful! 😁😁 Above all, the solution you submitted is greatπŸ‘Œ!

Happy <coding /> 😎!

Marked as helpful

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