All solutions

1. I create a separate navigation for snaller screen. I hide it in larger screen and show it in smaller screen. Is it a better way of doing it🤔.

2. The row of image in bottom doesn't align well in medium screen like in 800px width. I use flexbox for the text, set the image width according to screen size but it's not maximal. Any solution for this?

I have question in placing margin. I got confuse whether to place margin-top in below block, margin-bottom in upper block or add utility class that handle margin independently.

When user click the rating and then decide to click the other, I struggle to remove the already selected style back to normal and style the next selected rating. Then i found a solution to reference the previous selected rating object and use that reference whenever user decide to select other value. Is it any better solution to above problem?

I find it difficult to separate the navigation between the home navigation and login navigation. Then idea strike to my head to create new navbar wrapped inside div. Question i want to ask

• I confuse when to use min-width and max-width so i just opt for max-width on everything. When should i use min-width?
• I have few breakpoint in my css, is it better to add media query when things not looking good on certain resolution or have media query specific for device like phone, tablet, laptop, big screen?
• Since i don't use javascript, is it better to use javascript in this project? maybe to replace some bootstrap behavior

I struggle to center the container. Then after a lot of googling i use display flex and align-items center. I was unsure whether to target the html tag in css or tag inside particular css class. Is it best to target html tag inside classes or id because it is more specific?

I find it difficult to center and position the image and text content side by side