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

desafio Receita Simples de Omelete

RNSDaniel 40

@RNSDaniel

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?

conseguir organizar a pagina e deixar semelhante no final. O código ainda é longo, preciso melhorar isso

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

dimensionar os itens sem ter os detalher do design. fiz um esboço no figma

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

tenho dificuldades de como dimencionar as distâncias no CSS

Community feedback

@Breno-coelh0

Posted

Tenho a mesma dificuldade que você em dimensionar as distâncias, estou iniciando agora e queria saber como você fez para adaptar a página para celular, consegue me ajudar?

0

@MikeCook9994

Posted

This is quite good. I opted to not use a table for the nutrition information because table styling is bizarre. I think just some divs is a better approach here.

The only other thing that stands out to me is the overuse of rem in some places. For example, the header image is actually what constrains the size of the container. So I think it's more appropriate to set the image's max-width to the desired size (in this case 656px, exactly 50% of the original image's size), then set the container's width to min-content. Not the only approach, but because the container's size automatically adjusts according to its content, the page can more easily be maintained.

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