Simple-Omelette-Recipe Display: flex, display: block, medias.

Community feedback

• 

  Sunay Dagar•120

  @suzzy-dszyPosted 3 months ago

  Your solution comes close to the required design but there are some aspects which can be improved upon:

  Your solution comes close to the required design but there are some aspects which can be improved upon:

  1. Semantics: Your HTML code greatly lacks semantic elements such as main, section and footer.

     • For example, use main to wrap the entire contents within body instead of section.
     • You used the div element to define the different sections such as summary, ingredients, instructions, etc. Instead you should've used section element to define the different sections of the recipe.

  2. The left border in the table to separate the two sides puts the design out of place from what is required, however if that's your personal preference then there's no issue.

  3. If you pay close attention to the design images that are provided, you will notice that the bullet points are coloured. If you want to further improve your code to match the design you can use ::marker on the list element to do this.

  • A useful website that you can refer to is MDN WebDocs to further read up on the elements and classes that I have mentioned. Otherwise, all in all, you have done a great job. 💯

  Marked as helpful

  1