Pod Request Access Landing Pages with CSS Grid, Flexbox and JavaScript

Solution retrospective
Hi everyone,
I would really appreciate any feedback on how I can do a better job of creating more responsive layouts from the outset, without needing to do so much in my media queries.
If anyone has any thoughts, or can point me in the right direction, I would really appreciate it!
This is my 5th completed Frontend Mentor challenge! I learned a lot about JavaScript and Client-side form validation for this one, and I used CSS Grid more effectively than I have in the past.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @grace-snow
Hello
I’m afraid this looks very broken on mobile landscape at the moment. A reason might be a height 100vh instead of min-height somewhere, and its trying to show the desktop layout already when there isn’t room for it.
I recommend you take some time to focus learning on semantic html structure. That will help you plan your layouts better anyway.
And then address the specific issues on this
- missing header element
- inaccessible form (input not labelled, error message not linked to the input, no aria-live on the error element, missing button type)
- look into srcset or the picture element when you need to swap an image at a particular breakpoint.
- duplicate html - If you find yourself needing to repeat chunks of html content that’s a sign there is a problem with the layout approach. With planning you should be able to display the same content in different layouts
- there is no need to duplicate css code in media queries if the contidion would already be met by the previous one
- you will find layouts easier, have shorter and more performant code if you style mobile first instead
- try not to include elements in html that don’t need to be there (eg decorative content). If it’s not meaningful content, could you use a pseudo element and/or background image instead
I hope this is helpful
Marked as helpful - P@palgramming
Well it looks good but you need to work on your validation cause this
a@a
currently validates as a correct emailMarked as helpful
Join 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