pod-request-access-landing-page with CSS positioning and JS
Design comparison
Solution retrospective
Hi everyone ππ½, Am very glad to have completed my second JS project but I faced a hard time implementing the UI design and the approach I took for using Positioning made it tricky to make my solution very responsive and I have noticed icons are not rendered well in Firefox on small mobile media queries so I humbly request for ideas on how to improve my solution and any feedback on my solution more especially highlighting weak areas in my code will greatly be appreciated.
Community feedback
- @ozzy1136Posted about 2 years ago
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 helpful1@ssembatya-dennisPosted about 2 years ago@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.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord