Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Easybank - Gulp, Sass, mobile first, BEM naming

@DanielGibsonOrchid

Desktop design screenshot for the Easybank landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Would be keen to know how people add icon SVG's into HTML, do you normally use <img> tag or <svg> with <use> tag?

Any feedback is welcome. Thanks

Community feedback

Shashi Lo 1,345

@shashilo

Posted

Amazing work Daniel. Your eye for detail is impressive. I don't think the design will be coming back any any feedback if this was a real project.

Here's a few areas of suggestion:

  • Navigation click area can improve on both desktop and mobile. You have to be exactly on the text. Improving the UX of this will decrease less user error.
  • The features and articles section would've been cleaner to use CSS Grid rather than Flexbox. It does work, but subtle code improvements.
  • All of the other links and buttons have a subtle CSS transition but the main nav. Would be nice to have a transition here as well.
  • Look into https://eduardoboucas.github.io/include-media/ for your media queries. It's a simple SASS library that helps with media queries.
  • Decouple your SASS file. This is a simple project, but treating I always treat all my project as a full fledge project. Look at the 7-1 pattern https://sass-guidelin.es/#the-7-1-pattern.
3

@DanielGibsonOrchid

Posted

Thanks for your feedback @shashilo! Really useful.

I looked into the two links you suggested. The 7-1 pattern is good.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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