Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Multi step form built with React, Typescript and CSS modules

Jo89 😈 380

@AhmadYousif89

Desktop design screenshot for the Multi-step form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have an Input component that render the form in the personal info step number 1 it's working just fine but I would appreciate any feedback on it because I feel like it's a bit cumbersome and I think I need to refactor it. thanks in advance

Community feedback

P
FO 155

@de-furkan

Posted

I love it great effort, lovely design🎉🎉

In terms of key areas for improvement:

  • avoid setting:
outline: none;
  • i understand this can be tempting to do this, as the default outline usually looks ugly, but it can cause accessibility problems for users that make use of accessibility features. Outline is an important part of the accessibility tree to help users navigate and see selected areas of the form

    • while this can be overcome with other ways of styling, as you have done here, but it is still recommended to keep the outline.
  • perhaps as an alternative, you could style the outline as needed instead of adding an additional boarder

  • make use of <main> element to place the content into the main block

    • this makes it easier to control layout and page size as demonstrated in this code:
<main>
  // Html or react codes in between 
</main> 

html,
body{
  height: 100%;
}

main{
  min-height: 100%;
} 
2

Jo89 😈 380

@AhmadYousif89

Posted

@dev-furkan Hi, thanks for the feedback I think you are right about the outline style reset I will remember your tip next time for sure 👍 but I was hoping for a feedback on the Input component as well as I think it's more important than the styles as I prefer to focus more on the core logic of the app. thanks 🙏

0
P
FO 155

@de-furkan

Posted

@AhmadYousif89

hi,

Glad it can be of some help. Unfortunately i am not that experienced with typescript to provide any feedback. But i've tried to provide feedback from what I am capable of giving so.

Hopefully other community friends who are more experienced will be able to help you out there. In terms of the steps involved, it seems smooth on my end, works pretty well. But having said that, someone experienced with typescript will need to preview your codes to provide further feedback on that matter.

Thank you :))

1

Please log in to post a comment

Log in with GitHub
Discord logo

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