Skip to content
Submitted almost 5 years ago

SASS, HTML5, NPM

Simeon Udoh•535
@simeon4real
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro component with sign-up form
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

There's an annoyingly huge amount of whitespace on the bottom. I would appreciate it you tell me how to fix it.

That's why the padding of 3rem on screens > 600px is only applied to the top, left and right but not bottom.

Edit: Fixed. I'll push most recent version soon.

Edit2: fixed.

I look forward to your valuable response on how I can improve. I just learned CSS variables today and my next update will feature CSS variables rather than sass variables.

Community feedback

  • Simeon Udoh•535
    @simeon4realPosted almost 5 years ago

    Hello, About my solution, I can add text to the labels and use display: none; for the label, will it work?

    0
  • Matt Studdert•13,611
    @mattstuddertPosted almost 5 years ago

    Awesome work on this challenge, Simeon! It's great to see that you managed to resolve the whitespace issue by yourself. Your code looks really good, I've just got a couple of recommendations:

    • You've currently got label elements that are paired with input elements, which is great. But the labels haven't got any text inside, which makes the inputs inaccessible to screen reader users, as they wouldn't know what they were supposed to enter in the form field. Always make sure that you either have labels with text inside or an aria-label attribute on the input elements to help people using screen readers fill in the form with the correct data.
    • You're currently using the default HTML5 form validation messages. I'd recommend having a go at making the custom error messages that are in the design. It's a nice extra challenge.

    Keep up the great work! 🙂

    0
    Simeon Udoh•535
    @simeon4realPosted almost 5 years ago

    @mattstuddert Thanks! I finally fixed it!

    0
    Matt Studdert•13,611
    @mattstuddertPosted almost 5 years ago

    @simeon4real nice work! Sorry I missed your original message. I didn't get notified because it wasn't a direct reply. Also, I've been seeing your feedback to others on here. Thanks a lot! You're giving great advice 🙂

    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