Recipe page challenge solution using HTML & CSS

Hi, @itzvikashgupta. It's a good solution, keep coding... Here are some tips:

• The display: grid; rule doesn't work like a display: flex;. When you type display: flex; it works immediately with some initial values for the flex-container and the flex-items. However, if you type display: grid; it doesn't affect any element to set some initial values. It just creates columns and puts each grid item in it. In fact, that's the default behavior of the browsers. So you can get the same effect without display: grid; in this project.

• You can use the strong HTML element instead of the span element, as shown here:

  • <li><span>Total: </span>Approximately 10 minutes</li>
  • <li><strong>Total: </strong>Approximately 10 minutes</li>

• You can use the article semantic element for your container and separate them with the section semantic elements. This way is more natural for this project and you'll be more comfortable when you're styling the HTML.

• You used the nested CSS, it's a good way to adopt some new CSS features. Maybe you want to check logical properties...

I hope these will help you. Keep coding and have a nice day