Submitted 3 months ago

Responsive Recipe page using Flexbox

Sagi• 120

@ratsagi

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

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 proud of completing this challenge even if I procastinated a little. I tried my best to structure html and used modern css reset of Josh Comeau that was suggested from the previous challenges so I finally applied it. This is the last challenge from getting started module so I am so excited to start responsive module of this learining path.

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

I didn't know how to use html table properly and remove borders in some part of it went to mdn documentation to learn. I also used help channel and feedbacks of others to find the solution.

What specific areas of your project would you like help with?

I am not sure that header landmark is used correctly. In some resources it says that it can be used for introduction, logo, navigation and h1. If I am wrong please let me know.

Community feedback

Shoaib Shuja• 560

@ShoaibShuja

Posted 3 months ago

Amazing job my friend but the font doesn't seem to be applied to the page.

I checked your code and you forgot to copy the font's link in the head tag neither you imported it in the stylesheet. To fix this issue you can always find the links to different font types in google fonts and simply copy the link.

This will fix the font issue in your webpage:

Outfit and Young-Serif font's link for html head tag:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Young+Serif&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Young+Serif&display=swap" rel="stylesheet">

And also, you have the correct information about the header tag.

Sagi• 120

@ratsagi

Posted 3 months ago

@ShoaibShuja, thank you for your feedback. I am afraid you are wrong because the fonts are applied locally by @font-face you can check it by dev tools.

Please log in to post a comment

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