interactive pricing

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted almost 3 years ago

  Hey, awesome work on this one. Desktop layout looks great, it is responsive and the mobile state looks great as well.

  Some suggestions would be:

  • For the thumb slider, you could use something like:

  input::-webkit-slider-thumb:active {}
  

  Selector to target the slider-thumb and applying styling when it is active or when it is being clicked/dragged.

  • Using form to for the .card selector would be great since this layout serves as a form to submit those data, hence it has start my trial.
  • Do not remove the outline styling. If you did, always include a visual-indicator on the :focus-visible for those interactive elements like the button a tag and others. Try to navigate using tab key on your site, you won't be able to know where you are at.
  • When wrapping up a text-content, make sure that it is inside a meaningful element like p tag or heading tag and not using like div, span to wrap the text.
  • Also, the slider input currently lacks a label on it or an aria-label describing what that input does.
  • You should have used radio buttons for the toggle. Those text besides the middle one, the "monthly" and "yearly" are label for each of their own radio button. Have a look at this solution of mine on this challenge . This is an old solution but the markup seems fine I guess :>
  • The start my trial button should have type="submit" since on a real site, that would submit the form.

  Aside from those, great job again on this one.

  Marked as helpful

  1
• 

  Jimmy Hoang•570

  @JimmyHoang296Posted almost 3 years ago

  thank you so much, you always give the best instruction

  1