@pikapikamart
Posted
Hey, awesome work on this one. Layout in desktop looks great, it is responsive and the mobile layout is great as well. One thing though, inspect the layout in dev tools at the bottom, the img
starts to shrink.
Some suggestions would be:
- The
alt
value for the website-logo should only bealt="base apparel"
lose the word "logo", sinceimg
is already an image, no need to describe it as one. - The
input
as well as thebutton
should be inside aform
element, since this will, on real site, will send data. - The
input
should havearia-invalid="true"
being set to it, if the user submitted a wronginput
:
if ( input is wrong){
input.setAttribute("aria-invalid", "true");
} else {
input.removeAttribute("aria-invalid");
}
This way, users will know that there is an error.
Also have a search for aria-describedBy
you will use this to link up the id
of the error-message to the input
element.
- The
button
should havetype="submit"
and havearia-label="submit form"
, this way user will know what thisbutton
will do. - Lastly, the
img
that you are using, do not usemax-height: 100vh
, this creates the bug that inspecting layout in bottom dev tools, theimg
shrinks. You don't have to add that really.
Aside from those, really great job on this one.
Marked as helpful
@syzwnftr
Posted
@pikamart Hey, I really appreciates the thorough and detailed feedback you provided. I will look into these and make a change as you suggested. If you don't mind, can you review my previous challenge? Because I'm new to this and I really need this kind of feedback in order for me to improve. But of course, if you don't mind. Anyway, thanks again for this feedback.
@pikapikamart
Posted
@syzwnftr Sure, but maybe after 2-3 hours if you read this reply, just going to code some in the morning and after it, I will review some of your previous work^^