Skip to content
Submitted over 3 years ago

HTML, TailwindCSS(WindiCSS), JS

SuzuMantan•370
@agusthas
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Ping single column coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello everyone 👋,

This is my attempt on using TailwindCSS(WindiCSS) + Vite. Its my first time using those tools. Feedback will be very much appreciated for that! 😅

Also, any advice on:

  • Styling the error text underneath the input. In larger screens i managed to do that by adding position: absolute on the text, but on smaller screen i remove the absolute. I dont know any other ways to achieve this without absolute. Any other ways on how i can accomplish that would be great! 👏

  • Accessibility. Since this input doesn't have a label, does screen readers or something similar to that know what kind of input is this? Its weird for me since i usually put a label either before or after the input.

  • Responsive. I checked this on my PC, laptop, and Iphone, it feels good enough to me. Any advice on that would be appreciated.

Thank you! and keep coding 🔥

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hello, SuzuMantan! 👋

    Good job on this challenge! 👏 Overall, your solution looks good and responds nicely! 👍

    I think you can add aria-labels to inputs that don't have visual labels around them in order to improve the accessibility of your solution (and clear up a few of those errors on your solution report). You could also add labels to input elements, anyway, and simply visually hide them using a sr-only class or something.

    And using absolute positioning to position the error message isn't a bad idea. It seems to work rather well in this situation. 😉

    I just suggest adding a max-width to the form so that the input and button elements inside it aren't too wide when the layout first changes from desktop to mobile. 🙂

    Keep coding (and happy coding, too)! 😁

    0
    SuzuMantan•370
    @agusthasPosted over 3 years ago

    @ApplePieGiraffe I’ll put aria label there then 😅. And about the absolute positioning, if its good enough I can say then thats well done. Also thank you for noticing the max-width, was opening this in tablet and boom! Both input and button stretch all the way 😂 will fixed it soon.

    Again thank you and happy coding to you too!

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @agusthas

    No problem! 👍

    0

Please log in to post a comment

Log in with GitHub

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