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

Multy Step Form

@CONSTANTlNE

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 know i know... i need to improve Js and CSS

Community feedback

Abdul Khalid 69,080

@0xabdulkhalid

Posted

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

HEADINGS ⚠️:

  • This solution had generated accessibility error report due to lack of level-one heading <h1>
  • Every site must want at least one h1 element identifying and describing the main content of the page.
  • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
  • So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)

CSS 🎨:

  • Looks like you already the centered the component, but the issue is the height: -webkit-fill-available; is not an appropriate way to apply height to body element. So apply the following css rule to center the component accurately
body {
    min-height: 100vh;
}

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

0

@CONSTANTlNE

Posted

@0xAbdulKhalid this webkit is nonsense... have to find some other way, thanks

0

@Fredeugine

Posted

The change button at the final screen where there is a submit button is not working. Great work Dude

Marked as helpful

0

@CONSTANTlNE

Posted

@Fredeugine yeah thanks, i missed couple things, didnt include 2 months discount as well.. just missed

0

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