Base Apparel Coming Soon Page

Hi, @aldijoko. How are you?

You did a good job on implementing the design.

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

• Use semantic element in the HTML. For example: your card could have been wrapped inside a <main> element instead of a <div>. Header inside <header>.

• Keep the elements that are like a landmark to the structure of the page on their own. For example: you've wrapped <footer> inside a <form>. <footer> is used to show that the content inside it comes on the bottom of the page. You should move it outside of <form>.

• Content and images squishes too much when i resize the screen to lower width. You can use media queries to change the position of the image and header as per the mobile design template provided with the design files.

• If you'll go and analyze the page layout in the desktop and mobile design files. You'll see that there are three components that move in-between desktop and mobile mode. You should code them separately. This way you can easily change their position from desktop to mobile and vice-versa.

• Learn to use custom properties (variables) in CSS. With them you won't have to write the same values again and again. You can define a value on a variable once. And then reuse the variables wherever you want to use the value. This provides more robustness to the code. And in-case you want to change some value in future, you'll only have to change the value of the variable and the changes will be applied on all the elements.

• Your JS validation is working fine for me. But what i don't understand is why are you using eventListener on form. You should've used it on the submit button. You're only validating after the user has clicked submit.

  You've commented the subscription success message in the HTML. You should undo that and use JS to display the message.