@pradeeps4ini
Posted
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/
@danielswift10
Posted
@pradeeps4ini Thanks a lot brother, I really appreciate the comments, I'll try and implement them in my next project. Happy coding!😁😁👍
