Landing page using grid and flexbox

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 3 years ago

  Hi, Jason Greenwald! 👋

  It's great to see you completing another challenge! So, congratulations! 🎉

  Regarding your questions:

  • In general, you want to do some testing after to see whether everything is correct or not. Have you tried using screenreader on the site? In this case, it's good that you have added aria-label to the input and the social media links. But for the social media links, all of them say the same thing ("Share the news on Facebook"). Also, I would recommend removing the label because it has the input already have the aria-label.
  • For the width, I rarely use it. Also, I rarely use min-width either. For max-width, in this case, I would set a max-width on the container (an element that wraps the page content) to make sure that they won't fill the entire page. I think for the logo, it's okay to set a width since it won't cause any issue.
  • Variable in programming is used to store data. This way, you won't have to type the same code over and over again. You can just reference it by declare the name of the variable. In this case, I notice that document.getElementById("btn-rounded") is repeated twice. So, you might want to create a variable. This way, if you change the id of the button for some reason, then you just need to change the code on the variable itself. Then, everything will get updated.
  • I would suggest using querySelector. Also, I recommend using all classes begin with js- to select DOM elements within the JavaScript. Keep in mind, that only use the js- classes only for JavaScript purposes. This is important to separate the classes for CSS and JavaScript. This will make sure that if you change the styling, you don't accidentally destroy or disturb the functionality. This practice is known as separation of concerns.

  // Example
  const form = document.querySelector(".js-form");
  

  Some suggestions.

  • Always specify the type of the button. In this case, set the type of them as type="submit". It's going to prevent the button from behaving unexpectedly.
  • Why does when I submit a wrong email, the input filled with example@email/com? I would only expect the warning message to appear.

  I hope this helps! Happy coding! 😁

  02

  Marked as helpful