Skip to content
OverviewSolutions
8
Comments
60
Renan Rodrigues
@irenanrodrigues

All comments

  • Renan Rodrigues•960
    @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 atributo href="" 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 helpful
    0
  • Renan Rodrigues•960
    @irenanrodriguesPosted 9 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 o padding-top.

    Espero que essas sugestões sejam úteis para você! Continue com o excelente trabalho. 👍 Se tiver perguntas, fique à vontade para perguntar. 😊

    Marked as helpful
    0
  • luubelmiro•90
    @LUANABELMIROSubmitted 10 months ago

    Deixe seu comentário para seguir a minha evolução!

    FAQs

    1
    Renan Rodrigues•960
    @irenanrodriguesPosted 10 months ago

    Oi @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
  • Renan Rodrigues•960
    @irenanrodriguesPosted 10 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
  • Renan Rodrigues•960
    @irenanrodriguesPosted 10 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 helpful
    0
  • Renan Rodrigues•960
    @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
  • João Pedro de Oliveira•120
    @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.

    NFT preview card with flexbox

    2
    Renan Rodrigues•960
    @irenanrodriguesPosted 11 months ago

    Olá @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 helpful
    0
  • Renan Rodrigues•960
    @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 helpful
    0
  • Renan Rodrigues•960
    @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 helpful
    0
  • Renan Rodrigues•960
    @irenanrodriguesPosted 11 months ago

    Fala @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
  • Renan Rodrigues•960
    @irenanrodriguesPosted 11 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 helpful
    0
  • Lohan Gomes•190
    @LohangomesSubmitted 11 months ago

    gostei muito do desafio , achei bem tranquilo ,porém o mais difícil foi a parte responsiva do site .

    html e css

    2
    Renan Rodrigues•960
    @irenanrodriguesPosted 11 months ago

    Fala @@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