• Lots of white space on right of screen
• Menu squashed for seemingly no reason, you guys should be able to sort this with some tweaking
• otherwise looks good
• see screen shots...
  

I like how your team design the navbar using little animation as well.
It would be nice the cursor changes when hamburger hovers. Same as the close button.
Also, media query used twice, would be nice to double check - line 349 362 in CSS file. 👍

Hi guys, don't mean to be scathing, but here is a rundown. I like the way you provided a success message, something I didn't get around to!:

• It would be a nicer experience to provide error messages underneath the fields, rather than as alerts.
• A more stringent check for user names and message would be good. Currently, you only check for one character. You could filter out digits [0-9] for names, for example. You could also set a minimum length or maximum length as a property on the html elements e.g. min-length="10" on the name field. As an example, you can enter 476v2u6db as your name in to the form.
• The checking for each field should be independent. For example, no text entered in 'name' or 'message' only gets flagged up if the email address passes the test. Check your if(){} else if(){} else{} statements on the form.
• It would be nice to have validation before the user submits the form. To do this, you could try using an input event listener on the form fields. This detects when the fields receive input.
• A small aside: try using constrather than letas your first port of call when defining variables. Think about whether the variable needs to get changed or not. A good candidate for a constvariable is probably an html element in this context.

• You guys can do a better read me, you're awesome! 🥇

Don't worry too much about this - just a suggestion!

Since the projects are about getting everyone to work an even amount on the code and understand everything, it's good to try and get everyone to contributing the same amount to the codebase. This can be a difficult thing to measure, but Github tries in showing the amount of commits people contribute to a project. It's definitely not a perfect measure, but can be a good guideline to keep your eye on.

What can make it more difficult is that people often have different 'commit' styles. Some people work on very large chunks of code and then make a commit; some people will change one or two lines of code and then make a commit, resulting in a long string of commits. So of course this can cause a disparity in the metrics on Github.

It's good to discuss this as a group before starting, what your 'commit' style might be, since it will bring more consistency to how you work as a team, and that's always a good thing!

Just something to keep in mind for future projects 😊

I probably really butchered 'tabbable' but it's a word now so...

If you load the site and try to click 'tab' to navigate through with your keyboard, to simulate what a user without a mouse might do, then the first link it jumps to is 'scroll to see more' in the second section.

I think it might make more sense to have it tab to the navigation bar - see if you can make that happen using tab index to have the nav appear when the user hits 'tab'.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex

It's great that you've implemented that to prevent bad inputs and empty inputs. I also like that it lets you know that the message has been sent - a good example of Neilsen's 'visibility of system status' heuristic 😉

I like that you've used regex but one thing to keep in mind is that some users may have Javascript turned off. You can also use HTML5 validation on your form in place of or in addition to your JS validation!

https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

A small fix but good for accessibility - this tells screen readers what language the webpage is in 💯

https://www.w3.org/International/questions/qa-lang-why

• Burger menu not working at all without javascript
• submit button doesn't work at all without javascript

IDs should be individual for each element in the code and not reused, so that you can specifically target an element using the ID.

Classes are for things that are used over and over - for example, your 'name-fancy' class, where you apply the same style to each person's name.

Try and refactor your CSS a bit to reflect this! 😊

• Tab through works well, maybe think about adding access to the burger menu?
• When tabbing through it reads out your profile link buttons but doesn't tell us who's profile.
• "Scroll to see more" click takes you to top of page rather than further down as it suggests.
• Vox works well generally but only reads text when clicked on apart from buttons & form.
• Vox reading of form.... EXCELLENT! 👍
• Burger menu difficult to see for some colourblindness. Not found in naturally expected position (top right or left corner)
• No ARIA landmarking roles (banner, main, contentinfo) or labeledby for more specific content
• You could try to use less
  's and instead use

  or for content.

That is all 😁

"We will solve your problems and you will pay us" 😂

Great colo(u)rs as well - feels like a professional design!

The website looks great. One suggestion for making it even more of a good UX is to add a smooth scroll behaviour. Currently when you click things on the hamburger menu, it jumps between sections.

Read up below to see how you can implement this:
https://www.w3schools.com/howto/howto_css_smooth_scroll.asp

The Lighthouse audit suggests that you can improve the color contrast of some of the sections - I think the one where it lists your profiles can be low contrast for some users with sight difficulties. Have a look with the Colorblinding extension in Chrome.

Love that it floats on the page, and the animation when you hover over it 👍