Product Landing Page using CSS Grid

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  Hi, arey! 👋

  Nice work on this challenge! 🙌 Your solution looks pretty good and is responsive! 👏

  A couple of things I'd like to suggest are,

  • Maybe not using CSS grid to lay out the entire page. It isn't really necessary since block-level elements stack on top of each other by default. You should be good by just having the header, main element, and footer next to each other in your markup because they will display one after the other on the page.
  • Setting background-size to cover and adding background-repeat: no-repeat to the background image to make it look more like the original design (especially in the mobile view).
  • Turning the social media links at the bottom of the page into actual links by wrapping each of them in a link tag. You should also include some screen reader-only text inside the links or add an aria-label to each of them to show what the links are for.
  • Perhaps using a link tag for the "Register" CTA since those commonly take users to a register or sign-up page. 😉

  Hope you find these tips helpful. 😊

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  2

  ---

  

  arey•350

  @arey-devPosted over 2 years ago

  @ApplePieGiraffe Wow, thank you for this insightful comment!! I'll make sure to update my code and apply these tips. After reading this, I realized that I rushed my code and overlooked some important things.

  Happy Coding!

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 2 years ago

  @arey-dev

  So glad I could help! 😀

  1
• 

  David Miller•180

  @HumerousPosted over 2 years ago

  Hi Arey,

  Very nice design.

  Try focusing more on your margins, padding and image placing. On the button, you needed to add some box-shadow property.

  Also, I always use an HTML/CSS validator to check the code before submitting my code because then I know that my code is 100% before submitting.

  Hope that helps you out.

  Happy coding :)

  Marked as helpful

  1

  ---

  

  arey•350

  @arey-devPosted over 2 years ago

  @Humerous thanks!! Details like margins and padding really give me trouble. I will try my best judgement when settings these properties next time. Also, I will look into these HTML/CSS validators that you've mentioned, and try to use them.

  Happy coding!

  0