Responsive Website using ReactJS, styled-components, and React-Router

Community feedback

• 

  

  Alex•2,010

  @AlexKMarshall

  Posted over 3 years ago

  This is a very big project. Good effort for completing it.

  Be careful with your html structure. You need to use heading levels correctly. There should only be one h1 per page, and all other headings should follow in the logical order - think of them like a table of contents. Your pages need a main element for the principal content of each page too.

  Make sure that you consider accessibility. You need to include :focus-visible styles for all interactive elements. Most of the links on the pages are unusable with a keyboard as you can't tell which are selected. You also have a lot of moving animations - these must be switched off if the user has prefers-reduced-motion set, not doing so can cause significant problems for those users.

  The animations are also causing problems with the text. Because each letter is wrapped in its own span, the text breaks at weird points in the middle of words when it moves to the next line.

  Make sure that you check your design at all screen-sizes. You have horizontal scroll-bars that appear at above approximately 780px screen-width, and your footer grid content doesn't line up.

  On the contact page your form elements are all missing labels. Make sure to use the correct type for the inputs as well. The telephone number should have type="tel". Type="number" is more suitable for something like a quantity field. That way the user will get the correct keyboard to use on mobile, and you won't get things like number input spinners on desktop which aren't appropriate for a telephone number. The form contact errors for missing fields should only show when you try and submit the form. Currently they show as soon as you enter the page.

  Be careful when using react router and Netlify. Your links all work when you enter the site by the homepage, but if you try to bookmark the 'contact' page, for example, you will get a 404 error when trying to visit it. There are some extra settings you need to set up on Netlify to make this work properly.

  Make sure you use the correct size images. It seems like on desktop you are serving images that are too small, and they're getting scaled up, so they look blurry. This is particularly noticeable on the about us page. You need to make sure you serve the correct size image for the device the user is on. Also, make sure you have correct alt text. <img src="/static/media/image-about-hero.cd9299f7344ca7b76793.jpg" alt="/static/media/image-about-hero.cd9299f7344ca7b76793.jpg"> is a meaningless value. https://supercooldesign.co.uk/blog/how-to-write-good-alt-text

  I apologise if this seems like I'm being quite picky and raising a lot of issues with the site (that's my background in QA testing coming through). But this is a big site, and there is a lot of things to do on it. I would suggest it would be worth trying a few of the smaller challenges and really make sure that you're nailing the fundamentals correctly.

  01