Skip to content
Submitted 27 days ago

Responsive recipe page using only CSS

Gabriel de Azevedo•100
@gabriel-de-azevedo
Preview site (opens in new tab)View code (opens in new tab)
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'm pretty happy with how simple and organized the CSS ended up.

Only thing that I kept wondering is if there was another way to style the last table component.

I'll try something other than Flexbox next time.

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

It'd been a while since I styled lists and tables.

I also tried to stay pretty close to HTML defaults and didn't even touch them in my Style Reset so that added a few extra hurdles and quite a bit more research.

But, with enough Googling, I still managed to keep their styles pretty straightforward.

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

Suggestions on alternatives to styling tables.

Community feedback

  • P
    Ethan John Paguntalan•180
    @dev-ethanjohnPosted 27 days ago

    Hi Gabriel. Your solution looks almost identical to the mockup.

    I have few suggestions.

    1. Explore more robust solutions like Flexbox or Grid when applying spacing between components. However, using flow utility class is also good if we assume the content won't have any complicated structure other than purely text heavy vertical single-column components.
    2. Try to check out some semantic elements like article or sections to group related siblings.
    3. For the table, there are many ways to style it. Your approach is good; but from the design, each row doesn't have vertical padding. In my case, what I did is apply grid to the tbody for that gap, then use ::after pseudo element to style the divider by positioning it to the bottom by -50% of the actual gap of the grid. In that way, we wouldn't rely on paddings or margins with border line to setup the divider between the rows.
    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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