Responsive Base Apparel single layout using HTML CSS & JavaScript

Community feedback

• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  Hey, Daniel. How are you, buddy? You've done a great job implementing the design.

  I'd like to suggest some changes to the code, if you don't mind.

  • If you'll revisit the design files and analyze the design. You'll see that the design has three main moving components, header, image and the other content.

    Therefore, you should consider these components when designing the layout. You should keep all of them in their own <elements>. When using grid, you'd only have to change their grid-areas for mobile and desktop mode. This will make their transition from desktop to mobile and vice-versa smooth.

  • You can use <picture> element to change the same image of different size/resolution, for different viewport widths.

  • Provide a label for the input field. It is good for accessibility.

  • You can change the font-size of text dynamically respective to the viewport width, using clamp() function.

  • You should use an unitless value for line-height. Unitless value means that the line-height will be, "font-size * unitless value". https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

  0

  ---

  

  dAnIeL sWiFt•440

  @danielswift10Posted over 2 years ago

  @pradeeps4ini Thanks a lot brother, I really appreciate the comments, I'll try and implement them in my next project. Happy coding!😁😁👍

  0