@Omid-Heidarzadeh
Posted
Hi Phil, this is a success, you have finished the job, although as you mentioned, there is still room for improvement. The first problem is that you did not add the meta viewport tag to the page header. This tag tells the browser to adjust the page width according to the page size.
<meta name = "viewport" content = "width = device-width, initial-scale = 1>
The second problem is one of the main challenges that every developer faces in all projects, but the level of experience and skill are their main differences. I recommend that you first look at the details of the CSS Box model and the usual (or sometimes weird) ways to change the appearance and layout of elements (ie margin, padding, text-align, float, vertical-align, line-height, display, position, width, height, top, left, right, bottom, etc.). It is then essential to learn modern methods for arranging elements such as Flexbox and Grid. These two methods are a little bit tricky to learn at first, but once you understand them, you will not give up using them. As another suggestion try to see each page design in smaller boxes and plan. For example in this challenge "tip amount", "/ per person" and its relevant number are a good candidate to be in a wrapper element like <div> which is a block-level element (instead of <tr> element) and it takes all available horizontal space in its parent element.
Keep up the good work, Have a good day, and happy coding ;)
