@R3ygoski
Posted
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
@chcoutinho
Posted
Muito obrigado, @R3ygoski, pelas dicas! Vou estudar mais e aplicá-las!
