Responsive landing page, and my first challenge with JS.

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Hi Janne

  Great job on this! ❤️

  Tiny things I notice on the design (viewing on mobile)

  • huge padding-right on the input is hiding half the placeholder for me
  • it would be nicer on rounded inputs and buttons if you used background shadow for a focus state - it's a bit jarring having square focus line on a pill-shaped element

  In html

  • I'd argue those logos are important, meaningful content so they should have alt text. I would also give them a visually hidden h2 (for screenreaders and search engines that says something like works with major providers or something like that)
  • the input, button and error should all be in a form element. This is important for semantics and screenreader controls (controls change when in a form vs normal document content)
  • very important to give that input a label (aria-label)
  • button doesn't need a for attribute

  In js ​looks good ☺

  • only a suggestion - I recommend only using querySelector for grabbing your elements (for consistency). It's often considered best practice to use a consistent naming convention with classes and use those for js selectors. E.g. At my work we follow the convention of js- prefixed classes are used for any element that is selected in javascript. It makes it easy to see what's controlling js when you look at html, and avoids the danger of someone else changing a style class / ID and that breaking the js.

  Well done again on this

  2

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  Oh and with the css

  • min-height is better than height if setting to 100vh
  • never change the width/height smaller on html
  • I recommend an extra wrapper element (div) inside body and use that for things like limiting sizes (in rem), or even multiple containers if you need one for bg image, another for size... In real projects its unlikely you'd mess with the body tag

  I haven't gone through in detail on css - need to be on a browser to notice stuff really. The important things look like you've handled them well

  1

  

  Janne Tielinen•90

  @TielinenPosted over 3 years ago

  @grace-snow Thanks again. I really appreciate your feedback.

  I updated my solution according all your recommendations.

  Once more, thank you for your feedback and encouraging words.

  0