Skip to content
Submitted about 2 months ago

Recipe page using HTML and CSS

Carlosaac23•60
@Carlosaac23
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 getting used to it so that when I see the design I have to make, I know exactly where to start and what to do to make it similar to the design.

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

Mobile responsive design, aligned lists, and the last section trying to use the table tag.

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

I want help with the mobile responsive design, and how to make the recipe content take up the whole screen. Is there any other way to make the nutrition section? I mean, without the table tag. I want to know if I have to use more div's. I want the li to be aligned with the title and the text to continue below the text, not the period or li number.

Community feedback

  • Vladislav Zenin•120
    @vladzen13Posted about 2 months ago

    nice work on desktop viewports!

    font-face and vars - cool!

    for mobile viewports:

    1. start with mobile first
    2. do not put img in the same wrapper as rest content - in mobile design you can see that clearly. Set padding: 0 + width:100% for img and non zero padding for rest content.
    3. you have to setup media query to switch between card like view and img with width: 100% of body;
    4. I think breakpoint from desktop to mobile should be on point when h1 is about to wrap on the second line.

    Speaking of divs - i have simplest html possible, you can explore my most recent solution. Looks like this:

    <body> <main> <img> <div class="content">.....</div> </main> </body>

    You can make nutrition section with css grid or flexbox, but table seems right for me. It is semantically a real table.

    0

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