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
Your session has expired please log in again.
Not Found
Not Found
Not Found
Not Found

Submitted

Single price grid component

@iammukeshmahato

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


Give your feedback on my work. Is margin and padding is as same as design ?

Community feedback

Ahmed Bayoumi 6,800

@Bayoumi-dev

Posted

Hey Mukesh, It looks good!...

My suggestions:

  • I suggest you put the Why Us content into the list item to add more semantics to your project, Div's don't do much for semantics but a list is much more meaningful..:
<ul class="why-us-list">
   <li>Tutorials by industry experts</li>
   <li>Peer & expert code review</li>
   <li>Coding exercises</li>
   <li>Access to our GitHub repos</li>
   <li>Community forum</li>
   <li>Flashcard decks</li>
   <li>New videos every week</li>
</ul>
  • Page should contain a level-one heading, Change h2 to h1
<h1 class="heading">Join our community</h1>

You should always have one h1 per page of the document... in this challenge, you will use h1 just to avoid the accessibility issue that appears in the challenge report... but don't use h1 on small components <h1> should represent the main heading for the whole page, and for the best practice use only one <h1> per page.

  • Heading levels should only increase by one, Use h2 instead of h4... Ordered headings make it easier to navigate and understand when using assistive technologies.

  • I suggest you add cursor: pointer; to the button, The cursor indicates to users there is an action that will be executed when clicking on it

Hope this is helpful to you... Keep coding👍

Marked as helpful

1

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