Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Recipe page with React

@takinabradley

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I liked my organization of colors with CSS variables, using names such as --primary --primary-accent, and --background-accent. Theoretically that should allow me to switch the color theme easily if needed.

I focused mostly on the style on this one. If I were to do it more seriously, I'd probably make this component consume and render recipe data to me more reusable.

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

I hadn't touched tables in a while, and I had to research how to write them again. I also encountered weird behavior with padding on table rows- and I found through research I had to apply padding to / elements instead.

Styling the table was interesting too, and it was fun to use the :not() operator to exclude a bottom border from being applied to the last table.

I also had to research how to add padding between text content in a `` element and it's bullet. Figured out I could just using padding for that.

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

I researched how to center the bullet points vertically with long text, but couldn't exactly figure it out. Admittedly, my research was haphazard and I kind of just tried stuff.

I could have made custom bullet points, but I wasn't exactly feeling that. If there's a way to do it without creating custom bullet points, a hint would be nice!

Community feedback

@ffrosch

Posted

Good job on this challenge!

I think there is no way to center the bullet points, because this element only supports a very small subset of css properties.

I like your use of the :not() operator. I had totally forgotten about this one.

Styling tables can be tricky. One possibility to get a better alignment for the right column could be to remove the display: flex from tr and use this for th and td:

th {
  text-align: left;
  padding-left: 2em;
}
td {
  text-align: left;
  padding-right: 2em;
}
0

Please log in to post a comment

Log in with GitHub
Discord logo

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