Skip to content
Submitted almost 3 years ago

Base Apparel Coming Soon Solution using HTML, CSS, and Javascript

ronaldlamdevā€¢430
@ronaldlamdev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Took me a little more than a month to finish this project because I was learning JavaScript at the same time. I also realized a little too late while building this site that I should always start with mobile design first before doing desktop. I struggled a lot during this project especially trying to get my error popup message to appear, but it was fun and I learned a lot. Any suggestions, tips, and tricks, to improve my code are welcome.

Community feedback

  • Vanza Setiaā€¢27,775
    @vanzasetiaPosted almost 3 years ago

    šŸ‘‹ Hi milessteamaccount!

    šŸŽ‰ Congratulations on finishing this challenge! If you think this challenge is too hard, then I would recommend doing the easier challenges first (without the JavaScript). However, I have some feedback on this solution:

    • Accessibility
      • All the page content should live inside landmark elements (header, nav, main, and footer). By using them correctly, you can make users of assistive technology navigate the website easily. In this case, you can wrap all of it with main tag.
    <body>
  <main>
    page content goes here...
  </main>
</body>

Note: I only see the closing tag (</main>).
    • Alternative text for images should not be hyphenated. It should be informative and human-readable. In this case, the alternative text for the logo should be the company name (Base Apparel). Also, since it is inside the a element, the alternative text would be "Base Apparel - Home".
    • Wrap the WE'RE COMING SOON sentence in one h1. It only makes sense if they read together.
    <h1><span>we're</span> coming soon</h1>
    • Also, in addition to the previous feedback, you should use CSS to make the text uppercase. Only manually uppercase a word if you want it to be spelled (like an acronym).
    • The input element should have a type of email.
    • The submit button should have type of submit.
    • For the error icon, you can use background property on the input element.
    • Add aria-describedby="error-popup-message" to the input element.
    • For the hero image, I would recommend using either background property or pseudo-element.
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
    • JavaScript
      • I would rather listen for the submit event instead of the click of the submit button and separate the function from the event listener.
    const form = document.querySelector(".email-address-form");

form.addEventListener("submit", submitEmail)

    You can check my solution and try to understand how I did the validation. If you don't understand certain things, feel free to ask me the questions.

    That's it! Hopefully, this is helpful!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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