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

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  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

  2

  ---

  

  Brendan•170

  @brendanmaddenPosted over 3 years ago

  @grace-snow Wow, this feedback is invaluable, Grace! Thank you so much. I really appreciate you taking the time and making the effort to provide real feedback and suggestions that I can learn from and use to improve upon from here.

  I am going to do exactly what you said, and try my best to address all of those issues. I started working on the social proof section challenge this afternoon. I'm going to really take my time on this one, and make a real effort to learn more about, and use semantic best practices.

  As you said, hopefully this will help to improve my layouts and therefore responsiveness as well.

  I'll also take a mobile first approach to this one. I've been hesitant because it seems a little bit tough to wrap my head around right now. But as I said I'll really take my time on this one and give it a shot.

  I hope you'll check my next one out, and let me know your thoughts!

  Thanks again, Grace!

  Brendan

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  Well it looks good but you need to work on your validation cause this a@a currently validates as a correct email

  Marked as helpful

  0

  ---

  

  Brendan•170

  @brendanmaddenPosted over 3 years ago

  @palgramming Thanks a lot for letting me know, Patrick! I'm new at this so all feedback helps a lot! I think it should be fixed now. After looking into it a little bit, I realize form validation is more complex than I knew! Probably using JavaScript isn't the best way to go? But was good to get some practice and I'm glad I got it working!

  0

  

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  @brendanmadden Looks good now and really most of programming is knowing how to search on the internet

  also websites like this are good for testing Regex before putting it in you code to make sure it is doing what you want it to https://regex101.com/

  1

  

  Brendan•170

  @brendanmaddenPosted over 3 years ago

  @palgramming Amazing. This site looks awesome. Thanks Patrick! I really appreciate it.

  0