Submitted 3 months ago

Recipe Page using HTML and CSS

Mariam Khan•40

@mariamkhan04

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am proud that I tackled responsiveness effectively and nearly matched the design.

I also faced some confusion while writing CSS, so next time, I will explore CSS frameworks to enhance my styling.

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

I encountered challenges in adjusting the full menu to fit the display screen. Even after setting the body height to 100vh, my content remained scrollable instead of properly adjusting. I would love some suggestions on how to overcome this issue—perhaps I’m not understanding it correctly.

Also, I wasn’t sure how to style list markers and had to seek help online to align them properly with the text.

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

Yes, I need help with the line marker alignment issue, the menu not fitting properly, and some spacing inconsistencies. Also, I used the <strong> tag in my HTML, but the text didn’t appear bold—possibly due to an overriding CSS property. I had to explicitly set font-weight: bold for the <strong> tag. How can I resolve this issue?

Community feedback

Jair117•40
@Jair117Posted 3 months ago
I like it. The design looks great, although it lacks some details. In HTML it is not semantic, I recommend using the tags main, section, article, footer and figure. The mobile view looks great but does not fully meet the challenge, I recommend using media queries and relative positions to better adapt the mobile view and make it correspond to the challenge. Also, I recommend using variables in CSS to reuse code.
0
idristomy•170
@idristomyPosted 3 months ago
Nice job! The <strong> syntax didn't work because you set font-weight: 400; within the * selector, so that means you applied this property to all elements inside the HTML even <strong> will take font-weight: 400;
0

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