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

single-price-grid-component-using-html-css-grid-flexbox

@mohamed-magdy26

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


if there are any suggestions to improve my code quality or make it best practice, I would love to learn it. if there is good resource for learning BEM to improve writing CSS I will be thankful to refer me to it.

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Hi, @mohamed-magdy26! 👋

<button> element must always have type attribute to prevent unexpected behavior. Source: Checklist - The A11Y Project #use-the-button-element-for-buttons

I recommend using a unitless value for the line-height. Also, make it the <body> styling instead of to all elements—using the universal selector. Learn more — line-height - CSS: Cascading Style Sheets | MDN

Create a custom :focus styling. This will let people who use a keyboard to navigate the site know where they are currently on the page. More information — Focus appearance explained

I hope this helps. Happy 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