BASE APPAREL COMING SOON using CSS, Vanilla JavaScript, and BEM
Design comparison
Solution retrospective
ā¤ļøāš„ INTERACT WITH MY PAGE FOR A SURPRISE
WOW - this was a really fun and challenging project. It looks so simple but the styling had my brain in knots. Getting better at Vanilla JavaScript.
I hope to complete more JS projects on here. I also personally did not like how low resolution the hero images are. It bothers me how blurry it gets when I use my 4k monitor.
š„ ANY FEEDBACK IS GREATLY APPRECIATED!
Community feedback
- @pikapikamartPosted about 3 years ago
Hey, great work on this one. Desktop layout looks really great, the site is responsive as well, though I early suggest to make the mobile breakpoint a bit sooner because at like point 770px, the image is too thin, so making that transition would prevent that or maybe letting the left-side resize as well. Mobile view looks great also.
Some suggestions would be:
- If you somehow inspect layout in dev tools at the bottom, the image is not occupying the full height of the screen thus its upper part is being hidden. So a quick fix, on your
img
tag, instead of usingheight: 100vh
which is a bad styling, usemin-height: 100vh
so that it will scale properly. - If you use a primary
header
make sure that it is outside themain
tag so that it will be treated as one of you primary landmark. For this one, it would be better to use :
<header /> <main />
With the
header
being absolute on the top so that it won't affect the layout of themain
.- Use only the website name as the website-logo
alt
value. - When using
img
tag, you don't need to add words that relates to "graphic" such as "logo" and others, sinceimg
is already an image so no need to describe it as one. - I would use a descriptive
alt
on the lady's image since if you look at it, the lady is somehow using clothing on the base-apparel, maybe she is showcasing the clothing, those ornaments. - On the
h1
, you don't have to usebr
to make each text wraps on another row. You can usemax-width
on theh1
itself and adjust it until each text are wrapped on their own row. - The
button
inside theform
should be usingtype="submit"
. Remember that when abutton
is placed inside aform
element, it defaults totype="submit"
. So imagine if you have a close-button inside theform
without specifyingtype="button"
click the close-button will submit theform
. Be aware of this kind of scenarios. - The error-icon is only a decorative image. Decorative images should be hidden for screen-reader at all times by using
alt=""
andaria-hidden="true"
to theimg
tag or onlyaria-hidden="true"
if the image is usingsvg
. - Right now, the error is only seen visually but not really linked with the
input
itself. For a proper error, message, it would look like this pseudocode:
if ( input is wrong ) input.setAttribute("aria-invalid", "true"); input.setAttribute("aria-describedBy", id of the error-message); else input.removeAttribute("aria-invalid"); input.removeAttribute("aria-describedBy");
The error-message element should have an
id
attribute which is referenced by thearia-describedBy
attribute on theinput
element. By doing that, your user will know that the input is wrong because ofaria-invalid
and they will know what kind of error they made because of thearia-describedBy
. Have a look at this accessible form snippet that I have On this one, you can seearia-live
is used as well to inform the user right away on what is the status of theform
submission.Aside from those, great job again on this one.
Marked as helpful0@kenreibmanPosted about 3 years ago@pikamart Absolutely love the feedback! Thank you for taking the time to write this, it helps people implement better practice.
I went ahead and changed some of that styling advice that you gave me, and I will be implementing the aria attributes to my JS later today.
1 - If you somehow inspect layout in dev tools at the bottom, the image is not occupying the full height of the screen thus its upper part is being hidden. So a quick fix, on your
- @JimmyHoang296Posted about 3 years ago
hey man :)) really fun
1
Please log in to post a comment
Log in with GitHubJoin 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