Base Apparel Coming Soon Page

Community feedback

• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  Hi, @zuzexx. How are you? You did a great job on implementing the design.

  I'd like to give some suggestions to improve the code, if you don't mind.

  1. If you'll analyze the design files, you'll see that there are three main components which moves. Logo, brand woman image and content. So, you should structure your HTML such that you can easily reposition them to make the site responsive.

     I wrote a demo, that you can study, modify and learn from. https://codepen.io/pradeeps4ini/pen/vYRRPXq.

     You can restructure and put the logo image in a <header>, brand woman in a <div> and content in a <main>.

  2. In the JS. You're calling the validateComponents from the validateMail function. This creates coupling. You should call the validateMail in the callback of the eventlistener and get a returned value of true/false from the function. And after that validateComponents as per the returned value, in the callback function.

  ```
  

  btn.addEventListener("click, () => {
      const validEmail = validateEmail();
  
     if (!validEmail) {
        validateComponents();
    } 
  

  }");```

  3. To change the image dynamically without using CSS/JS. You can use <picture> element. It allows us to change images respective to the width of the screen. You can learn to use it from here... https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

  Marked as helpful

  0