@suzzy-dszy
Posted
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:
-
Semantics: Your HTML code greatly lacks semantic elements such as
main
,section
andfooter
.- For example, use
main
to wrap the entire contents withinbody
instead ofsection
. - You used the
div
element to define the different sections such as summary, ingredients, instructions, etc. Instead you should've usedsection
element to define the different sections of the recipe.
- For example, use
-
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.
-
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