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 landing page using HTML, CSS and JS

Lucas 470

@acamposlucas

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


Not sure if I used aria-attribute correctly in input field. MDN docs was a bit confusing to me.

Community feedback

Vanza Setia 27,795

@vanzasetia

Posted

Greetings, Lucas! 👋

Good effort on this challenge! 👍

Yeah, I do sometimes feel confused by the MDN documentation (good to know that I am not the only one who feels it 😆). There are a lot of text and links which makes it looks complicated to me. 😅

Anyway, some suggestions from me.

  • I am not sure about the ARIA attributes. I did things differently. So, I would have an aria-describedby attribute on the input element. After that, I had an aria-live on the error message element. This way, once the error message is visible then the screenreader can also announce the error message. You can see my solution to understand what I did.
  • For the responsiveness of the site, on 1000px width, the input element and the image are very wide. So, I would recommend having a container element to limit the width of all elements. I recommend setting a max-width and margin: 0 auto to center the elements horizontally.

That's it! Hope this helps. 😊

Marked as helpful

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