Renan Rodrigues
@irenanrodriguesAll comments
- @fabianajmgeSubmitted 7 months ago@irenanrodriguesPosted 7 months ago
Olá @fabianajmge, tudo bem? Parabéns pela conclusão de mais um projeto. Tenho algumas sugestões que podem ser úteis para você.
Na classe links, seria uma boa prática utilizar a tag semântica
<nav></nav>
. Isso ajuda a melhorar a acessibilidade e a semântica do seu código.Além disso, notei que nas tags
<a>
, o atributohref=""
está faltando. Este atributo é importante para indicar o destino do link.No entanto, o seu código está muito bom. Parabéns novamente pelo seu trabalho!
Marked as helpful0 - @fabianajmgeSubmitted 10 months ago@irenanrodriguesPosted 10 months ago
Oi @fabianajmge, tudo bem? Parabéns por mais um projeto concluído.
Não sei se você fez o teste na versão mobile, mas seu layout esta quebrando. Acho que você poderia tentar desenvolver futuros projetos, em Mobile-first.
Para a imagem do smartphone, você pode usar a tag <picture>, para fazer suas imagens ficarem mais dinâmicas aos tamanhos de tela. Tem esse vídeo do Prof. Guanabara que explica bem como funciona.
Para colocar as imagens de curva, você pode fazer usando os pseudo-elementos
::before
e::after
.O footer está ficando escondido, isso está acontecendo porque você deixou com
position: absolute
, recomendo remover e também opadding-top
.Espero que essas sugestões sejam úteis para você! Continue com o excelente trabalho. 👍 Se tiver perguntas, fique à vontade para perguntar. 😊
Marked as helpful0 - @LUANABELMIROSubmitted 10 months ago
Deixe seu comentário para seguir a minha evolução!
@irenanrodriguesPosted 10 months agoOi @LUANABELMIRO, tudo bem? Parabéns por concluir o desafio! Tenho algumas sugestões para você:
-
HTML Semântico: Comece a desenvolver seus projetos usando HTML semântico. Isso melhorará a acessibilidade e a organização da sua página, tornando-a mais limpa e reduzindo o uso de muitas tags divs.
-
Atributo Alt: Notei que o atributo alt da sua imagem está vazio. Este atributo é crucial para a acessibilidade. Recomendo adicionar uma descrição breve e significativa.
-
Botão: Seu primeiro botão está com a imagem errada, exibindo o sinal para abrir a questão. Além disso, no modo Mobile, o botão está sobrepondo seus títulos. Você pode resolver isso usando flexbox para espaçar e alinhar os itens corretamente.
-
Imagem de Fundo: A imagem de fundo no modo Mobile não está funcionando corretamente.
-
Tag de Título: As tags dos seus títulos estão incompletas, aparecendo apenas como <h>. Certifique-se de usar a tag de título correta (por exemplo, <h1>, <h2>, etc.).
Espero que essas sugestões sejam úteis para você! Continue com o excelente trabalho. 👍 Se tiver perguntas, fique à vontade para perguntar.
0 -
- @IamThiago-ITSubmitted 11 months ago@irenanrodriguesPosted 11 months ago
Oi @IamThiago-IT, tudo bem? Parabéns pelo desafio.
Não tenho certeza se você realizou testes do seu projeto em telas de maior dimensão. Durante os meus testes pelo DeevTools, observei que o layout começa a apresentar problemas quando a largura da tela excede 600px.
1 - @jessicavsampaioSubmitted 11 months ago@irenanrodriguesPosted 11 months ago
Oi @jessicavsampaio, tudo bem? Parabéns pelo desafio, ficou muito bom sua solução, então tenho poucas dicas para você.
No seu container, seria interessante usar a tag <main>. Isso ajudará a tornar o seu HTML mais semântico e acessível.
Notei que na classe question você usou a tag <a>. Como esse elemento não redireciona o usuário para outra parte do site, uma alternativa seria usar a tag <h2>. Isso pode melhorar a estrutura e a semântica do seu código.
Marked as helpful0 - @barbarachagasSubmitted 11 months ago@irenanrodriguesPosted 11 months ago
Olá @barbarachagas, tudo bem? Parabéns por concluir o desafio! Aqui estão algumas sugestões para aprimorar ainda mais o seu projeto:
Modo Desktop: Notei um pequeno bug no modo desktop do seu projeto quando a janela do navegador começa a diminuir de tamanho. Para corrigir isso, você pode alterar a propriedade width na classe .card para 650px.
Espaçamento em .card__result: Na classe .card__result, sugiro adicionar a propriedade
justify-content: space-around;
. Isso ajudará a manter os espaçamentos dos elementos mais consistentes com o layout do projeto.Efeito Hover e Cursor no Botão: Parece que o efeito de hover e a propriedade
cursor: pointer;
estão faltando no botão. Adicionar esses detalhes pode melhorar a interatividade do seu projeto.Espero que essas sugestões sejam úteis! Se perguntas, fique à vontade para perguntar. Continue com o bom trabalho! 😊
0 - @jaojogadezSubmitted 11 months ago
olá, levei entre 1:30hrs para fazer este desafio, eu gostaria se alguém avaliasse se a forma que eu codifico está correto ou se posso melhorar em determinadas áreas do código.
@irenanrodriguesPosted 11 months agoOlá @jaojogadez, tudo bem? Parabéns por concluir o desafio! Aqui estão algumas sugestões para aprimorar ainda mais o seu projeto:
HTML Semântico: Tente usar mais elementos semânticos do HTML. Isso não só melhora a acessibilidade, mas também torna o seu código mais organizado e fácil de entender.
Atributo alt: No atributo alt das suas imagens, tente fornecer uma descrição mais detalhada. Isso é especialmente útil para usuários que dependem de leitores de tela.
Classes CSS: Notei que as classes .div1 e .div2 têm propriedades muito semelhantes. Você pode considerar a criação de uma classe comum para ambas e, em seguida, adicionar classes auxiliares para quaisquer modificações específicas. Por exemplo:
Ex:
.footer-content { display: inline-flex; width: 100%; align-items: center; padding: 10px; gap: 5px; } .footer-content.-eth {padding: 10px;} .footer-content.-days { font-size:16px; font-weight: 400;}
Efeito Hover: Parece que o efeito de hover do desafio ainda não foi feito.
Se ficou com alguma dúvida, pode perguntar =)
Marked as helpful0 - @PamellaMoraesSubmitted 11 months ago@irenanrodriguesPosted 11 months ago
Oi @PamellaMoraes, tudo bem? Parabéns por mais um projeto concluído. Tenho algumas dicas para você.
Seus cards ficaram com um espaçamento grande, isso está acontecendo porque você deixou a propriedade
min-height: 100vh
na tag section, se remover ela, já resolve.No modo desktop, eles ficam com larguras diferentes, recomendo definir para section um
width: 350px
.No botão faltou fazer o efeito de hover e faltou o arredondamento das bordas dos cards.
Se ficou com alguma dúvida, pode perguntar =)
Marked as helpful0 - @DrielySantosSubmitted 11 months ago@irenanrodriguesPosted 11 months ago
Oi @DrielySantos, tudo bem? Parabéns por mais projeto. Ficou muito bom, tenho poucas dicas para você.
As fotos de perfil, acredito que no projeto, tenham o tamanho de
width: 32px
.Os parágrafos dos cards com fundo branco. estão com uma cor difícil de ler, se mudar para
color: var(--very-dark-grayish-blue);
, fica melhor para leitura.Na sua classe .comments, você pode adicionar a seguinte propriedade, para fazer um efeito nos cards.
.comments { transition: all 200ms ease-in-out; } .comments:hover { transform: scale(1.02); }
Se ficou com alguma dúvida, pode perguntar =)
Marked as helpful0 - @eric-suzuki-devSubmitted 11 months ago
O meu 7º desafio de HTML e CSS. E bem-vindo qualquer, feedback! Obrigado!
@irenanrodriguesPosted 11 months agoFala @eric-suzuki-dev, tudo bem? Parabéns por mais um projeto concluído. Tenho algumas sugestões para você.
Na media query, recomendo deixar um tamanho de
min-width: 920px
. A pessoa que não tiver um monitor grande, só vai conseguir visualizar a versão mobile do seu projeto.Na parte de cada modelo dos carros, você repediu as propriedades css para os 3 modelos, você pode estruturar assim:
HTML
<section class="container orange"> restante do código....</section> <section class="container cyan"> restante do código....</section> <section class="container green"> restante do código....</section>
CSS
.container { height: 21.625rem; width: 14.0625rem; display: flex; flex-direction: column; align-items: flex-start; border-radius: 0 0 10px 10px; padding: 3rem 3.1875rem; } .orange { background: var(--bright-orange); } .cyan { background: var(--dark-cyan); } .green { background: var(--very-dark-cyan); }
0 - @nathsantoliverSubmitted 12 months ago@irenanrodriguesPosted 12 months ago
Oi @nathsantoliver, tudo bem? Parabéns por completar o desafio. Não sei, se você chegou a fazer teste em outros tipos de tamanho de tela, mas seu card na versão desktop, está quebrando o layout.
Como você usou a unidade vw, para definir alguns
width
em seu projeto, isso pode estar causando a quebra.Vi que você usou as unidades px, rem e vw. Recomendo escolher uma das unidades e usar em todo seu projeto.
Marked as helpful0 - @LohangomesSubmitted 12 months ago
gostei muito do desafio , achei bem tranquilo ,porém o mais difícil foi a parte responsiva do site .
@irenanrodriguesPosted 12 months agoFala @@Lohangomes, tudo bem? Parabéns por completar o desafio. Tenho uma sugestões que você pode estar usando.
Para fazer a alteração da imagem, tem a tag semântica
<picture>
, vou deixar esse vídeo do Prof. Guanabara, que ensinar o uso dela.0