Submitted 10 months ago

omlette-recipe-page

Joy Abigail Mwende•10

@Unicorngal

A solution to the Recipe page challenge

Preview Code

Solution retrospective

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

I am most proud that I didn't give up. This was my first coding project ever, and I pushed through despite the number of times I had to put down my laptop and take a walk to let out the frustration of errors.

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

Getting the containers and table to match the design provided. I used the Google dev editor to tinker until the design and my code matched. And deploying the project. I watched a video by KimDoesCode.

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

How did I do? Is my code readable, and clear? (In case I was working with a team, would it be good to go?) Is there an easier way to get the colors of the design? Is there an easier way to find the dimensions of the content container?

Code

Please log in to post a comment

Community feedback

Abd Ur Rehman•360
@A-noob-in-Coding
Posted 10 months ago
Hi there,

The solution appears to be too large that one need to zoom out to see the page better

You can cover the entire recipe card container in <main></main> for better accessibility

You can set the set the height of body to 100vh so that it covers the full screen and do not extend beyond it

For images in html you are using the width and height in pixels instead do this
- Try to use relative units to make the page more responsive
- Always use the images in figure semantic tag for accessibility
- Use the following line of CSS to make the images responsive
```
img{
width: 100%;
height: auto;
display: block;
}
```
Use the following code to make the page responsive

I hope this comment is helpful

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