Easybank Landing Page

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Awesome work on this challenge, Basak! You've done a really good job. Here are a few pointers that will hopefully help:

  • Try having a go at making the image of the phones in the intro overlap the second section like in the design. It's tricky but well worth taking the time to get it right.
  • Review the responsiveness of your design around the tablet sizes. You'll see there are a few areas where the layout doesn't look quite right.
  • Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.
  • You've currently got multiple h1 elements. Although this is valid HTML it's generally still considered a bad practice, as it can cause accessibility issues with the content hierarchy. Instead, I'd recommend sticking to a single h1.

  I hope these points help. Let me know if you've got any questions! 🙂

  0

  ---

  

  Basak ulcay•110

  @basakulcayPosted over 4 years ago

  Hi Matt, thanks for taking the time to give some feedback.

  • Related your 2nd comment, what breakpoints would you use when designing a website?
  • Where would you recommend using min-width? Could you give an example?

  Thanks!

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @basakulcay no problem! I'll typically have some major breakpoints that I use but then I add in minor breakpoints if ever the layout is off between the major ones.

  For example, the major breakpoints I used when building Frontend Mentor are 500px, 768px, 1024px, and 1240px. These are the ones I use most often on the site. But then I'll add in other breakpoints that are dictated purely by the content to make the site as responsive as possible.

  When it comes to using min-width I just always use them instead of max-width. So you'd use it in the same way it's just you'd be working from mobile up as opposed to desktop down.

  Let me know if any of that is unclear. Hopefully, it helps!

  0