Skip to content
Submitted 2 months ago

Pagina simples usando HTML e CSS

Carlos Henrique Coutinho•50
@chcoutinho
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?

Ter conseguido finalizar a página o mais próximo possível do desafio.

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

Na parte de tabelas. Tive muita dificuldade para entender como deixar uma coluna distante da outra. Fiz bastante pesquisa no google pra conseguir encontrar a solução e executar.

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

Acho que por enquanto, nenhuma. Muitas coisas consegui aprender por pesquisas.

Community feedback

  • Bernardo Poggioni•5,280
    @R3ygoskiPosted 2 months ago

    Olá Carlos, parabéns pela conclusão do seu desafio.

    Tenho algumas dicas para dar quanto ao seu projeto, começarei pelo CSS. No seu seletor body você utilizou a propriedade overflow: auto; , ela não era necessária, pois o valor inicial de overflow já é auto. Além do mais, nele também tem um padding, que não é necessário, tanto que acredito que você a utilizou para fazer a página responsiva para mobile correto? Mas se você for ver na pasta Desgin, que vem no arquivo Zip que você baixou do desafio, nela tem a imagem de como tem que ficar o Design mobile, e nele não tem esse padding lateral. E para fazer essa parte de responsividade, é só utilizar as @media-query. Aqui um link sobre: W3School - @Media

    Também notei que você centralizou o card utilizando a margin, tenho duas dicas quanto a isso, a primeira é que ao invés de utilizar várias propriedades margin cada uma para um lado, o interessante seria utilizar uma shorthand, dessa forma:

    margin: 128px auto;
/* Esse margin equivale a: */
/*
  margin-top: 128px;
  margin-bottom: 128px;
  margin-left: auto;
  margin-right: auto;
*/

    E o segundo ponto é que, não é ideal fazer centralização utilizando o margin, mas sim utilizando o display:flex; ou display:grid;. No seu seletor body você pode colocar esse trecho a seguir, que fará com que o card fique centralizado:

    display:flex;
justify-content:center;

    Segue um link também relacionado a Margin: W3School - Margin

    Agora sobre o HTML, ele está bem estruturado, mas está pouco semântico, e estar semântico é muito importante não só no SEO, mas também na acessibilidade da sua página. Vou mostrar algumas tags que podem ser alteradas.

    • <div class="section-rounded-container"> pode ser alterado para <main>, isso porque geralmente após a <body> nós utilizamos a <main> que serve para indicar o conteúdo principal da página. Mas em determinados contextos, pode ser também <article> pois é um card autoexplicativo e independente do resto do contexto da página.
    • <div class="section-text"> pode ser alterado para <section>, isso porque esse trecho é uma secção da sua página que agrupa itens de uma mesma temática. Note que isso vale para as outras secções da sua página.

    E é isso, novamente parabéns pela conclusão do projeto, caso tenha ficado qualquer dúvida, por favor comente abaixo que tentarei ajudar da melhor forma possível.

    Marked as helpful
    1
    Carlos Henrique Coutinho•50
    @chcoutinhoPosted 2 months ago

    Muito obrigado, @R3ygoski, pelas dicas! Vou estudar mais e aplicá-las!

    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