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

HTML and CSS

@manishasamanta

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


Any suggestion please 🙏.

Community feedback

@tiagocostarebelo

Posted

Hello, You are on the right path and it will only get better.

In your code, you need to close the <head> tag before starting the <body> tag. Also, assign classes to your HTML tags. You'll see how it helps your styling. Also, don't use <br> to create margin between HTML elements. Style them with margin-top or margin-bottom, depending on what you need. The same can be applied to the margins and how you set them in your paragraph. Check this link (https://www.w3schools.com/css/css_margin.asp)

There's also a the uppercase titles and the borders on the left and right that are rounded and the button, it doesn't take the full width.

And for accessibility issues to be removed, put everything inside a <main> tag.

Keep it up!

Marked as helpful

0

@manishasamanta

Posted

@tiagocostarebelo Thank you so much for your suggestion. I put everything inside <main> tag. and it worked. But can you explain what is the function of <main> tag ?

1

@tiagocostarebelo

Posted

@manishasamanta this link is very useful to understand the main tag.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

0

@manishasamanta

Posted

@tiagocostarebelo thanks

0

@whoiskekeanyway

Posted

This is perfect, and You did an excellent job. You need to adjust the size of the fonts to match the design. Add border radius to the container also. Instead of being justified to the left, your button is also at the centre. so I think making the button small should solve this remove the tiny space between the cards

Marked as helpful

0

@manishasamanta

Posted

@whoiskekeanyway Thank you so much for your suggestion .

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