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 solution using grid

MatejBumberaβ€’ 70

@MatejBumbera

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


Please let me know if you have some suggestions on how to improve my solution.

Community feedback

@MelvinAguilar

Posted

Hello there πŸ‘‹. Good job on completing the challenge !

Great job on your solution! I can see that you've implemented landmark elements like <main> and <footer>, which is excellent for accessibility. Well done!

Here are some suggestions to further improve your solution:

  • Add cursor: pointer to the button: By adding this CSS property, you'll provide visual feedback to users when hovering over the button, indicating that it's clickable.
  • Use <ul> and <li> for the content under "Why Us": Since the content is a list of items, it's more semantically correct to use an unordered list (<ul>) and list items (<li>) instead of just using paragraph (<p>).

I hope you find it useful! πŸ˜„

Happy coding!

Marked as helpful

1

MatejBumberaβ€’ 70

@MatejBumbera

Posted

@MelvinAguilar Hi! Thank you for feedback. I have been thinking about making the section a list, bud it would give me an unnecessary indentation and bullet points. Is it really worth it to go through the extra trouble of removing it?

1

@MelvinAguilar

Posted

@MatejBumbera Hi again ! It's understandable that you might want to avoid the extra indentation but using semantic HTML elements like <ul> is considered a best practice for accessibility.

If you want to use a list, but want to remove the default bullet points and indentation, you can do so with CSS. You can set the list-style property to none and adjust the padding or margin to control the spacing as desired.

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

Marked as helpful

1
MatejBumberaβ€’ 70

@MatejBumbera

Posted

@MelvinAguilar Thanks for answer, already changed it :D

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