Submitted 7 months ago

Responsive Recipe Page using HTML/CSS

Dias•140

@adambeckercodes

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’m most proud of creating a clean and responsive recipe page with accessible features like semantic HTML, and focus-visible styles. The use of CSS variables made the styling consistent and easy to maintain, and the design adapts well to mobile and tablet devices.

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

Responsiveness: Adjusting the layout for various screen sizes was tricky, especially balancing spacing and font scaling for mobile and tablet devices. I overcame this by using a mobile-first approach and testing with multiple media queries. Still there are some things which don't work as intended.

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

Feedback on adding animations or JavaScript for a more engaging experience would be great. Are there any specific features I could implement to make the page stand out?

Is there a more efficient way to build this kind of layout?

Code

Please log in to post a comment

Community feedback

why-not-phoenix•330
@why-not-phoenix
Posted 7 months ago
Hi dias!! Once again another near perfect solution. I have a few questions:
1. In line 36 to 47, why did you have to specify box-sizing: border-box; for the html? wouldn't it have same effect if it were * {box-sizing: border-box;} instead of inherit?
```
/* GENERAL */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
```
1. What is the function of body { height: 100vh; } ? Wouldn't the content just overfow?
I probably have other questions but I am sure you're too busy for them. Great solution, looking forward to more of your solutions.

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