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

CSS grid, CSS flex, responsive, JS, no-librairies

#vanilla-extract
enzmrg πŸ’«β€’ 870

@enzo-mir

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 found this project that hard i've made it in 4 days but want some typs in JS because my JS are confuse as if I know what i do just some simple shortcuts :)

Community feedback

Vicktorβ€’ 900

@Victor-Nyagudi

Posted

Hello.

Nice try on this challenge.

In terms of functionality, it's working just as I expected, so good job on that.

However, your solution has many errors both in the accessibility report and the HTML validation report.

I'll address some in this comment, but I'd recommend going through them and trying to fix as many as you can before looking at the JavaScript.

One issue is you have empty <h2> elements. This is bad for accessibility because screen readers read these out loud to people with poor vision telling them what the section is about.

If you're not going to use them, then it's best to remove them completely. If you do plan on using them with JavaScript, you could add the whole element to the DOM instead of having an empty one whose textContent or innerHTML you'll change later.

Secondly, if you want to use <aside>, it should not be inside an <article> because these are both landmarks. Either use an <aside> with <div> inside them, or an <article> with <div> inside them, but not both nested inside each other.

Finally, if you want to use a <label>, what goes inside it should often be just plain text. You're getting a lot of errors because you're putting an <h3>, <p>, and <div> inside a <label>.

I'd recommend just using a <div> instead of a <label> if you plan on including many things inside it.

I'll let you work on these first.

Try it, and let me know how it goes.

I hope this helps.

Marked as helpful

0

enzmrg πŸ’«β€’ 870

@enzo-mir

Posted

@Victor-Nyagudi Hello.

First of all thanks you a lot for payed attention at my work and all of you HTML typs are jus all I want regarding accessibility, I take note of your advices.

Thanks for all that was really helpfully.

(PS : I am french so if you don't understand some words sorry ...)

1
Vicktorβ€’ 900

@Victor-Nyagudi

Posted

@enzo-mir

You're welcome.

It's okay. I understand what you're trying to say.

Marked as helpful

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