@ozzy1136
Posted
Your finished project looks pretty good! However, there are a couple things you should fix.
First, you should put the main content of the page between <main></main> elements. At the moment, you have all of your content inside a <header/> elements, but this is bad for semantics and accessibility. Usually, only headings and, if it is the page header, site navigation links. Take a look at this <header> reference for other examples of what type of content should go between <header/> elements: https://developer.mozilla.org/en-US/docs/web/html/element/header.
Second, consider using CSS grid for laying out the content on the page. Using absolute positioning is difficult to maintain for page responsiveness and grid is perfect for that. Check out this reference for CSS grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout.
Lastly, I would remove the <div/> that wraps the email input and icons, because these items are not really related. This is just a personal preference.
Marked as helpful
@ssembatya-dennis
Posted
@ozzy1136 Thank you so much for such a wonderful feedback and I have learnt a lot from your post and am willing to change my solution accordingly putting semantics tags and CSS Grid Layout into consideration. Thanks for the good spirit and keep it up. I wish you a happy coding moment.
