All solutions

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

I think it is difficult to take care of both mobile and desktop at the same time.

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

This project is a bit complicated. There are still many functions to be implemented on the basis of responsiveness. It may be easier to use a framework to implement this project.

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

In the process of completing this form, I will try to find the best solution. In this process, I learned a lot.

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

In the process of completing this form, I encountered two problems, which made me a little entangled. I don't have a good solution. Here are the problems I encountered and the solutions

1. The input tag is added with required. At this time, the pseudo-class selector :invalid will take effect directly during initialization, resulting in an error message being displayed as soon as the page is opened. I think this is not good.

   • Method 1: Add the novalidate attribute to the form, and then check it yourself through js. This is too troublesome.
   • Method 2: Use :foucus + :invalid to display the error message, which is only displayed when focused.

2. email has two checks required and type=email. Any failure in any check will make the pseudo-class :invalid effective, and there is a requirement to check the email format in the requirements. So here I can only use js to distinguish the check type and modify the corresponding text.

For the above problems, if you have a better method, please let me know, thank you

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

I learn html tag details and summary, and in tailwind css , add open class with details

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

I have a question, when I click, I can't check radio. So I use js to slove this question, what else method to slove this question?

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

I use radio to implement chang time

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

1. did here other way to implement?

group-[:invalid:focus-within]:block, I try to write group-invalid:focus-within:block but it's not working。group-invalid:block or group-invalid:block It's not working.

1. did some method can change marker position? such as marker:mt-1

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

use object-position change img position

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

I feel so confused without a design draft. Should it be 1px more or 1px less? What is this color? It makes me too confused. Forget it. I am tired. I will destroy it.

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

I learn how to use responsive images， like this:

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

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

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

There is no design drawing reference, which caused me a lot of trouble. I tried to put the setting drawing as the background and put it at the bottom for reference.

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

I learned how to use box-shadow in tailwindcss.

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

1. question 1 Which font did I use?

I found some fonts in assets/fonts folder. But I don't known which is best.

2. question 2 Is there a problem with the semantics of HTML?

I think I need to optimize the semantics, please help me

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

I am learning to use tailwind css. This is also my first time to challenge the frontendmentor platform. I am very satisfied with my restoration level. I think it is 90%.

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

I have two questions:

• Question 1: How to write box-shadow in tailwindcss better? I was lazy here and used the existing shadow-2xl.

• Question 2: I can't write hsl color in tailwindcss. I converted it to RGB format and wrote it.