Base Apparel Coming Soon Page | HTML5, CSS Flexbox, JS

Solution retrospective
Any feedback for improvement are greatly appreciated.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @pikapikamart
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 theid
of the error-message to theinput
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 - The
- @erickamae-mateo
It's great! You just need to add spacing between your text. Whitespace helps your design to be more readable and words won't look crowded.
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