Skip to content
Submitted over 3 years ago

React/SCSS flex/grid

Sean•175
@sean-b765
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Agency landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Hey all. I decided to do this one in React as I'm going to add some more animations tomorrow, like when content is visible it will fade in. I used framer-motion for animating the landing section.

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago

    Some of the issues that needs fixing:

    • the nav list items in the nav should be anchor elements - there are links that should be taking you to other pages. (About, services, projects)
    • well in the footer although you used anchor elements - i would still use an unordered list as well . The footer socials should be anchors in an unordered list - that will help Assistive tech users with valuable information such as the length of the list and the current item in the list.
    • using more than one h1 element does not cause errors but is considered as not best practice since it causes confusion to those who rely on assistive technology.
    Marked as helpful
    0
    Sean•175
    @sean-b765Posted over 3 years ago

    @ChamuMutezva Thanks,I'll fix these tomorrow. I also found from the HTML report that semantic elements don't need role attributes. Would be nice to know more of how assistive software helps people read a webpage, so I think I'll look into that!

    0
  • Ahnaf Hasan Shifat•385
    @ah-nafPosted over 3 years ago

    Beautifully done. :D

    1

Please log in to post a comment

Log in with GitHub

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