Recipe page main using CSS flexbox

Solution retrospective
i am proud to complete this learning part to the best of my knowledge
What challenges did you encounter, and how did you overcome them?i found it difficult to position the table well, but i solved it by using the term border collapse : collapse
Please log in to post a comment
Log in with GitHubCommunity feedback
- @stephany247
Hi Olisaemeka,
You did a fantastic job on this one! The structure is clean, the design is visually appealing, and your use of semantic HTML and responsive styling is solid. 👏
✅ Highlights:
- Great use of headings, lists, and semantic tags.
- Clean and well-organized CSS with thoughtful spacing and colors.
- Responsive layout and good use of media queries.
- Font imported correctly using
@font-face
.
🔧 Suggestions for improvement:
-
The soft pink background is showing on mobile, but according to the original design, it should only appear around the card on larger screens. Try limiting the padding or background to a wrapper element and apply it only in larger viewports using media queries.
-
Add
alt
text to the main image. Even a short description like"A plate of omelette"
improves accessibility. -
You could consider using semantic tags like
<section>
,<article>
, or<header>
to further structure the content. -
The nutrition table could benefit from
<th>
tags for clearer headings (though this isn’t a must).
This is high-quality work — just keep an eye on accessibility and semantics as you build more. Keep it up! 💪🔥
- @lucassalles-git
Muito bom Ezemaolisaemeka, parabéns. Ficou muito bom.
Very good Ezemaolisaemeka, congratulations. It was very good.
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