Recipe page challenge solution using HTML & CSS

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted 10 months ago

  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

  Marked as helpful

  0

  ---

  

  Vikash Kumar•230

  @itzvikashguptaPosted 10 months ago

  Really learned some new things from your comment definitely gonna apply those. Thanks!👊 @adonmez04

  1

  

  P

  Alper•1,010

  @adonmez04Posted 10 months ago

  @itzvikashgupta You're welcome. If you want to learn more about in CSS, I recommend you this source: https://web.dev/learn/css

  Marked as helpful

  0

  

  Vikash Kumar•230

  @itzvikashguptaPosted 10 months ago

  sure! thanks @adonmez04

  1