Frontend Mentor | Html, CSS, Javascript coding challenge solution

Community feedback

@MelvinAguilar

Posted almost 2 years ago

Hi @Mounir-kh 👋, good job on completing this challenge! 🎉

Here are a few suggestions I've made that you can consider in the future if you're looking to improve the HTML code:

Try to use semantic tags in your code. Click here for more information.:

With semantic tags:

<body>
   <main class="main-container">
      . . .
   </main>
   <footer class="attribution">
      . . .
   </footer>
<body>

The thank you illustration is for decoration purposes only, so it can be hidden from screen-readers by adding aria-hidden="true" and leaving its alt attribute empty:

<img src="images/illustration-thank-you.svg" alt aria-hidden="true">

The container isn't centered correctly. You can use flexbox to center elements:

body {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

Additionally, remove the margin to center the main-container correctly.

.main-container {
    . . .
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* margin-top: 10%;
}

Links with more information:

I hope those tips will help you.

Good job, and happy coding!

Marked as helpful

Mark• 250

@markskwid

Posted almost 2 years ago

Hello, @Mounir-kh

To slow the transition of your thank you card using JavaScript you can use setTimeout. Example:

submitButton.addEventListener('click', () =>  {
    setTimeout(() => thankyouContainer.classList.remove("hidden"), 1000);
    mainContainer.style.display= "none";
 }
);

Please visit this website to read more about setTimeOut

Happy coding!

Marked as helpful

Html, CSS, Javascript

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community