Responsive Recipe page using HTML, CSS (media-queries,..), Google Font

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

I'm proud that I have completed this project in one sitting. For next time, I would try to write the code in more systematic way. By that I mean :

• I was able to create the look-alike page, but I have used way more unordered CSS that it might actually require.
• br tag is also one of them, I thought I'd not use it, I'd do everything using CSS but have used it plenty but saw this accessibility things after I submitted this so I have added some CSS in place of br tag. br tag is not allowed inside the ol or ul that's why I got the accessibility issue.

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

I face challenge in writing media queries and bringing the line under each row of a table.

• I'm not that well-versed in media queries, so I have searched its syntax and example then I was able to solve it.
• For the bottom line under table rows, I tried using border-bottom directly on tr tag, but it doesn't work and also tried to actually create a horizontal line div under each tr in HTML file, but it also doesn't work. So, I just pasted the following CSS on web and asked to create bottom border:

table{ width: 100%; } tr{ border-bottom: 0.1px solid grey; } td { padding: 8px; }

Then, I was suggested to write border-collapse:collapse; on table, when I wrote that, the border line gets created.