Responsive landing page using CSS Flexbox and Grid

Great work! This looks good for someone who considers themself a newbie. Keep it up.

First things first, there's a warning in the accessibility report telling you every page should contain a level-one heading i.e. h1. This is because it's the first thing screen readers read out loud to people with poor eyesight telling them about what's on the page.

I'd suggest adding a title like "Tip Calculator" inside an h1 tag at the very top of your HTML. You can then give it a class like for-screen-reader and style it such that it's out of view for those with good eyesight but screen readers still read it out loud for those with poor eyesight.

Example styling:

.for-screen-reader
{
     position: absolute;
     right: -10000000;  // give it a very large number so it's out of view
     height: 1px;
     width: 1px;  // if it ends up on the screen, it's too small to see
     overflow: hidden;
}

I noticed that if you enter the amount first and then select a percentage, it throws an error but works when you start with the number of people

This isn't all bad since you can just press reset, but it's not the best user experience since people will naturally start at the top and move downwards.

You could optionally add an event listener like onkeyup on the inputs so that the user can change the number of guests or amount without having to hit reset.

I completed this challenge too and implemented this, so feel free to take a look at my code and see if it helps you out. https://www.frontendmentor.io/solutions/mobilefirst-using-bem-flexbox-css-grid-and-vanilla-js-71IKl_vqZ

Good luck with your other solutions.