Mobile first using HTML, Sass and JS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, it is somehow responsive and the mobile state looks fine, just need the input to be centered like what Tee have said.

  Some other suggestions would be:

  • You shouldn't use:

  <h1> SPLI</h1>
  <h1> TTER</h1>
  

  This makes it unreadable from assistive tech. What you could have done is that, use only 1 h1 to wrap the text like this:

  <h1> splitter </h1>
  

  Then use text-transform: uppercase on the h1, do not explicitly type the word capitalized, because instead of being read by the word splitter, it will be read out letter by letter. Then to make it wrap, use word-break: break-all on the h1 then add max-width on it, adjust the max-width until the word breaks.

  • The select tip shouldn't use h5, use heading tag incrementally, if you have h5, make sure that h1, h2, h3, h4 are all present before it.
  • I wouldn't really used button for the tips, since it doesn't make it really accessible, I would use input type="radio" for those, for which the text select tip will be my legend inside a fieldset, this way, it will add more information about the user on what is going on, since button itself can't make those. This might be confusing, I don't have any example to show on this one :>
  • The custom input needs to have label for it, the label would have sr-only since it will be screen-reader text to hide from sighted users.
  • Your error should as well needs to address, not only zero, but negative value.
  • The error-message as well needs to have id attribute, to which will be referenced by the input below it. This will be used by the aria-describedBy attribute, that will be used on the input. This way, when user inputs a wrong value, the text appears, then the input is linked with the error, making users know what is the error is all about, use aria-invalid on the input as well. I have snippet for this one, but it is a snippet for form, but the above technique is used on it, take a look and see how it should be used
  • The tip amount / person could only used single heading tag.
  • The number on the right side or the result, shouldn't be a heading tag especially not a h1. Always use single h1 on a webpage, avoid using multiple h1.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  Rhino•155

  @Rhiino1Posted about 3 years ago

  @pikamart Your comment it's awesome, I never received that kind of feedback, thank you so much. I'm going to look every thing you said and I will do my best fixing it, working on projects like this made me fell in love with front-end, my short developer life was spend working on back-end but Frontendmentor and people like you just doing amazing this is perfect for me to fit in.

  Thank you so much again and keep being so nice. 😄

  1
• Account deleted

  Nice one, your solution looks pretty good.

  • The whole input section needs to be centered when the layout switches, it is leaning to the left, not sure why you didn't fix that, but flexbox is supposed to take of that, and if for some weird reason it doesn't you can center is like this; margin-left: 50%; transform: translate(-50%).

  Keep coding👍.

  0