Base Apparel Coming Soon Page

Community feedback

• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  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.

  0

  ---

  

  Aldi Joko•410

  @aldijokoPosted over 2 years ago

  @pradeeps4ini if you dont mind, i want to ask about what is different between when use only div with main,header section?

  0

  

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  @aldijoko Do you mean using <div> instead of <main>? If yes, then the main difference is that <main> is used to create a landmark on the page, that the content here is the main content of the page. And it is also better for readability and accessibility.

  <div> is mostly used when we don't have a semantic element to wrap some content. For example, suppose you have multiple images and you want one image to have outer border, that spins once you hover on the image. One way to achieve that would be to wrap the image in a <div> and creating borders on div and spinning those borders when image is hovered.

  0