Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Recipe Page with Added Media Query for Mobile

P
TM3N 140

@tmen670

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

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

oaved 90

@oaved

Posted

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 helpful

0

P
TM3N 140

@tmen670

Posted

Thank you for the great advice!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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