Submitted 3 months ago

Html

Nico•330

@Nico243

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?

Redid the code with a css file for readability, worked on my margins and padding,

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

Issue: The content was too close to the edges of the browser window. Added Padding to the Body: Solution: Added padding to the body to create some space around the content.

Issue: The container content was too high up in the viewport.

Adjusted Container Margin: Solution: Added a top margin to .container-m to push the content down.

Text Center Alignment:

Issue: Ensuring the text is centered within the container for better

readability. Solution: Set the text-align property to center for the container.

Added Margins to Text Elements:

Issue: The heading and paragraph were too close to the image. Solution: Added top margins to the heading and paragraph to create space.

Community feedback

Franci Melink•400
@francimelinkPosted 3 months ago
Hello Nico,

To review your solution and describe what, in my opinion, could be improved, I will use the key points suggested by Frontend Mentor:

Your solution uses semantic HTML elements, which is great.

According to Lighthouse, the page is accessible, with the only issues being related to performance.

I noticed some minor issues with the layout in mobile view. I suggest you check and deepen your knowledge of Flexbox to start, and maybe later explore using Grid layout.

I would also organize the code differently to make it more readable and easier to maintain. Typically, CSS is separated into an external file and included in the HTML file. While this may not be an issue for smaller projects, it will be beneficial in the long run.

There are some discrepancies regarding padding, margins, and typography. Apart from the previously mentioned issues in mobile view, everything else looks good.

I also find it helpful to use Figma for tasks, where you can check sizes, dimensions, etc. It helps visualize these details better, although it doesn't train the eye as much.

Great job on the task, and keep up the good work!
Marked as helpful
1

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