Submitted over 3 years ago

HTML, CSS, and JS, Mobile first solution

Jane• 1,040

@janegca

Preview site View code

This is a solution for...

Pod request access landing page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

My tenth completed challenge. This one took some planning and re-planning but when I ran into a snag I had a much better idea of what was causing the problem than I had when I was working out the first few challenges. The practice is definitely helping.

Not quite happy with the positioning on my desktop layout, any and all suggestions for improvements are welcome.

Community feedback

Grace• 27,950

@grace-snow

Posted over 3 years ago

I should add that overall this looks really good and the html is well structured.

Only 2 very minor suggestions

rather than alt text saying 'logo' I would say the name of the product. Logo alone is a description of what sighted users see
as you've got aria label on the input, you don't need a separate label element. * If that label element is what you want to contain error messages it should be in a p tag with an ID and an aria-live attribute set to "polite". Then you link the input to the error message container by placing an aria-describedby attribute with a value of that ID onto the input.

I hope that makes sense and is helpful. Please upvote comments if it is ☺

Jane• 1,040

@janegca

Posted over 3 years ago

Thank you @grace-snow, your points were clear, I made the changes you suggested. Trying to read more about accessibility, hopefully will get it right in the future.

Grace• 27,950

@grace-snow

Posted over 3 years ago

Hi Jane, I've only looked on mobile and as I can't see the design so only reviewing from memory - please forgive if I've got things wrong here!

From memory, I thought the background on mobile was meant to be a dark opaque background where you can see the image faintly behind. That's not what I'm seeing here which makes the text quite tricky to read. Maybe revisit that (or just correct me if my memory is wrong!) 😂

Jane• 1,040

@janegca

Posted over 3 years ago

Hi @grace-snow, no, lol, your memory is right. I actually thought there was no background image in the mobile design (I could not see it in the Figma file) but figured, since the image was available, I would include it. I did add an overlay to dull it to the point I could read the text ok but will pump up the opacity a bit more just to be safe.

Please log in to post a comment

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