Skip to content
Submitted about 5 years ago

Easybank - Gulp, Sass, mobile first, BEM naming

Daniel Gibson•885
@DanielGibsonOrchid
A solution to the Digital bank landing page challenge
Preview (opens in new tab)Code (opens in new tab)

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

Code

Please log in to post a comment

Log in

Community feedback

  • Shashi Lo•1,345
    @shashilo

    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.

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