Skip to content
Submitted almost 3 years ago

Easybank landing page

sass/scss, accessibility
Mr Rabbit•1,020
@rabbitmaid
A solution to the Digital bank landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I learned a lot from this exercise. I had difficulties positioning the hero image and also how to make sure all my article boxes have the same height regardless of the description length

Code

Please log in to post a comment

Log in

Community feedback

  • Ahmed Kamel•1,190
    @hmadamk

    to solve your accissibility issues and Html issues you need to do the following

    1. Header does not need a role it's a header so that's already define it
    2. your section shouldn't have a role, role is specified for certain things to learn more about roles check mdn it should have aria-role for screen readers
    3. your page must have one section to be instead of a section to the main-element this should be the most important section like the hero one
    4. don't leave the srcset empty
    5. if the img is not for decorating the page you should but a description for it in the alt attribute
    6. your page must have one h1 element holding the main idea of your site you could wrap the img at the .header__logo with an h1 and then remove the margin from it what this does is that it assign the value of the alt to the h1 which mean your page is more search engine friendly
    7. you should use h2-h6 at least one into all of your sections happy coding hope this helped if it did help you consider marking this comment as helpful
    Marked as helpful

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