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

Base Apparel coming soon page with HTML & CSS

P
Ctrl+FJ• 750

@FlorianJourde

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Let me know what you think about it ! I hope my script is ok !

Community feedback

Raymart Pamplona• 16,140

@pikapikamart

Posted

Hey, awesome work on this one. Desktop layout looks really great, though on the responsiveness side, if you try to go at width 985px, the hero-image is just squished and the layout does not respond to screen-changes. Mobile layout looks great though.

Some suggestions would be:

  • Avoid using height: 100vh on a large container like the body tag as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Your aria-label for the logo-link is incorrect. If an image acts as a link like the website-logo, the aria-label should define where the link would take the user like aria-labe="homepage".
  • Website-logo img should be using the website's name as the alt like alt="base apparel". Remember that a website's logo is meaningful so always make sure it uses the proper alt value.
  • Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags.
  • Also on your h1 you should have just use single h1 for the text and just use max-width to make the words wrapped in another row. Adjust the max-width until you are satisfied.
  • Your input tag lacks an associated label tag on it. Since there are visible-label, the label would be a screen-reader only label, meaning it would make user of like sr-only class. The text-content should describe what the input needs like the value on the placeholder.
  • Submitting the form without value gives me 405, it would be great to just let the user know that it is unsuccessful though.
  • Add an aria-hidden="true" on the error-icon so that it will be totally hidden for screen-reader users.
  • Use button type="submit" instead of input.
  • Also, I don't know about other but I prefer only show error after submitting an invalid response and not with every keyup event, so that user will only be notified once.

Also if you want, have a look at this simple accessible form that I have if you have any queries about this, let me know.

Aside from those, great job again on this one.

Marked as helpful

1

P
Ctrl+FJ• 750

@FlorianJourde

Posted

@pikamart Thanks à lot for your feedback ! I'm sure I'll improve, because of it. I guess my main mistakes comes from form, I didn't used to make them. Also, thanks for you JSFiddle link ! I'll keep it close to me !

Thanks again, glade you liked it !

1
P
Ctrl+FJ• 750

@FlorianJourde

Posted

@pikamart I'll use your accessible form to resolve this challenge today. Mate, I would be glad to receive your opinion, once I'll have submit my solution !

Edit: I don't have time at the moment to fix HTML issues since I have to eat something, but you can still have a look to what I did here. Thanks again for you fiddle !

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