Design comparison
Solution retrospective
I am most proud of utilizing media queries on CSS, and was satisfied with how similar it looked to the mobile design example.
What challenges did you encounter, and how did you overcome them?The biggest challenge I had was making the page match that of the mobile page example. It looked fine to me on a desktop, but when I shrunk the browser to a phone's size, it looked off and incorrect. I fixed this problem by doing research and learning about media queries which was very cool and much needed.
What specific areas of your project would you like help with?I felt like I had lots of unnecessary code, so maybe some advice on if I wrote some lines down that weren't needed, or if I could shorten my code. I also would like some criticism of how I did the semantics. I found it a bit difficult to implement semantics to a simple recipe page.
Community feedback
- @oavedPosted 4 months ago
I don't know if it will shorten your code but I find it useful to design text with utility classes. It makes the CSS code shorter and takes away the problem of coming up with a uniqr name for every bit of text. The downside is the HTML gets longer. But utility classes could be something you wanna check out.
I think your semantics is fine but I think your use of <article> is a bit off. I belive <article> is used when something can be taken out of the context of the webpage and still be understood. The best example is in fact an article of some sort. In this case I would use the <section> tags where you use <article>. You could also use the role-attribute in your table. Use role=table, role=row and role=cell on the table, row and cell divs.
Just some tips and tricks, the design looks good and that is the most important!
Marked as helpful0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord