recipe page with tailwind css

What are you most proud of, and what would you do differently next time?

In the recipe page project, I used tailwind css for development, and I learned more about responsive design.

I also learned more about the semantic tags of HTML and the styles of :marker.

In the grid and native table attributes, I used the latter because I have hardly used the native table. Through this project, I also learned more about the table.

What challenges did you encounter, and how did you overcome them?

I encountered several small problems. First, the list-style of li is controlled by css

Then the style control of table makes me feel very embarrassed and entangled

Finally, I also encountered a problem with responsive design. I don’t quite understand whether I should develop the mobile terminal or the PC terminal first. According to the responsive design of tailwind css, md @media (min-width: 768px) { ... } should only take effect on screens above 768. So should I develop the mobile terminal first, and then develop the PC terminal based on the mobile terminal?

What specific areas of your project would you like help with? Question

1. question one

There is a small flaw. I used the native table to implement the Nutrition at the bottom. The field on the left has no padding.

1. I tried to add padding-left, but it caused the field on the right to move.
2. Add padding-left to the field on the left, and then set the width, but fixed width will have problems on mobile. So is there any other better way?

2. question two

I still have some doubts about responsive design. In tailwindcss, I can use the md: tag to operate responsiveness. I don’t quite understand whether this means that the mobile terminal should be used first?

For example, the cover: h-[200px] md:h-[300px] at the top, the mobile terminal or the default is 200px, and the PC terminal or when the width exceeds 768px uses 300px