Skip to content
OverviewSolutions
13
Comments
10
Adriano
@adriano-wb

All comments

  • Adriano•310
    @adriano-wbPosted over 1 year ago

    Muito bem Fernanda, o seu código está bem definido e cumpriu o desafio solicitado com sucesso. No entanto, ainda ah algumas questões que você precisa se atentar.

    1. Você não definiu uma tag <main> para indicar o conteúdo principal de seu HTML
    2. A página deverá conter um elemento de título de nível 1, use apenas um <h1> por página
    3. Elementos <section> e <article> sempre devem conter um elemento de título <h1> ... <h6>

    Contudo, essas são sugestões para lhe deixar mais capacitada, que seu site possa ser mais acessível e que seja fácil encontrá-lo por mecanismos de busca como o Google. Pode não ser importante aqui neste projeto, mas se preocupe quando for em projetos reais para uma empresa sua ou para um cliente.

    Marked as helpful
    0
  • Adriano•310
    @adriano-wbPosted over 1 year ago

    Very good my friend, great animation, yours was one of the best I've seen. I don't think there's anything special you need to improve on, you're talented.

    1
  • Adriano•310
    @adriano-wbPosted over 1 year ago

    O HTML parece estar correto em termos de sintaxe e marcação. No entanto, aqui estão algumas sugestões de melhoria:

    1. Incluir descrições significativas em elementos HTML como imagens e ícones.

    2. Adicionar atributo alt em elementos de imagem para fins de acessibilidade.

    3. Adicionar comentários em partes importantes do código HTML para facilitar a manutenção e compreensão do código.

    4. Evitar a mistura de estilos inline e externos e centralizar a estilização em um único arquivo CSS.

    Marked as helpful
    0
  • Adriano•310
    @adriano-wbPosted over 1 year ago

    O seu HTML está bem estruturado do jeito certo, mas ah algumas questões de acessibilidade que podem ser tratadas, aqui vai uma lista explicadinha para você :):

    1. Adicione um atributo alt descritivo para a imagem:

    <img src="/images/icon-star.svg" alt="Five stars rating icon" />

    2. Adicione um atributo aria-label para os botões de classificação, descrevendo claramente a função dos botões:

    <button class="rating" id="btn1" aria-label="1 star">1</button>

    3. Adicione um atributo aria-live para o elemento que contém a atualização da classificação, para que os usuários com deficiência visual possam receber feedback imediato:

    <div class="bot" aria-live="polite">
  <div class="rating-update">You selected 4 out of 5</div>
</div>

    4. Considere fornecer um feedback tátil para os usuários que usam teclado para navegar pelos botões de classificação. Por exemplo, usando o CSS :focus ou JavaScript para mudar a cor ou o estilo do botão quando estiver em foco.

    5. Verifique se todo o conteúdo é acessível por meio de um teclado e se a ordem de tabulação faz sentido. Por exemplo, ao pressionar a tecla "Tab", a ordem deve ser a seguinte: botão 1, botão 2, botão 3, botão 4, botão 5, botão Enviar.

    6. Considere usar um esquema de cores que seja acessível para pessoas com daltonismo. Há ferramentas disponíveis online para verificar a acessibilidade das cores, como o site a11y.css.

    Marked as helpful
    0
  • Adriano•310
    @adriano-wbPosted over 1 year ago

    Aqui estão algumas sugestões para melhorar este código:

    1. Adicione uma descrição ao elemento de imagem: Adicione um atributo "alt" descritivo para a imagem para melhorar a acessibilidade e fornecer informações úteis para os usuários que usam leitores de tela.

    2. Remova pré-conexões redundantes: As pré-conexões para o mesmo recurso não são necessárias, portanto, você pode remover a segunda pré-conexão do Google Fonts.

    3. Agrupe as pré-conexões: Agrupe as pré-conexões relacionadas para melhorar a legibilidade e o desempenho do código.

    4. Use uma classe mais descritiva: Em vez de usar "card-container", use uma classe mais descritiva para identificar o elemento, como "qr-code-container".

    5. Adicione um estilo de plano de fundo: Adicione um estilo de plano de fundo ao elemento body ou ao elemento principal para melhorar a aparência do site.

    6. Use espaços entre os atributos: Adicione espaços entre os atributos para melhorar a legibilidade e a facilidade de leitura do código HTML.

    7. Considere usar um pré-processador CSS: Considere usar um pré-processador CSS como o Sass para simplificar o processo de escrita de CSS e melhorar a manutenibilidade do código.

    8. Adicione comentários descritivos: Adicione comentários descritivos ao código para ajudar a entender o que cada seção do código faz.

    Marked as helpful
    0
  • Adriano•310
    @adriano-wbPosted over 1 year ago

    O seu código está muito bom, mas pode melhorar a organização com algumas dicas:

    1. Melhorar a organização do código HTML

    • Adicionar um espaço após o nome dos atributos;
    • Quebrar as linhas para facilitar a leitura.

    2. Usar classes mais descritivas:

    • Alterar as classes "result-left-part" e "result-right-part" para nomes mais descritivos que descrevam melhor seu conteúdo.

    3. Separar o CSS em arquivos separados por seções:

    • Separar o CSS em arquivos diferentes por seção (por exemplo, um arquivo para a parte de resultados e outro para a parte de resumo);
    • Utilizar nomes descritivos para os arquivos.

    4. Evitar o uso de estilos inline:

    • Utilizar uma classe CSS para definir os estilos da tag.

    5. Usar comentários para facilitar a manutenção do código:

    • Adicionar comentários explicando o que cada seção do código faz.

    6. Adicionar fallbacks para garantir a acessibilidade:

    • Incluir texto alternativo para as imagens usando o atributo "alt".

    7. Melhorar a semântica do HTML:

    • Usar tags semânticas (por exemplo, "header", "main" e "footer");
    • Adicionar uma descrição mais descritiva para a tag "title".

    8. Melhorar a acessibilidade:

    • Adicionar uma descrição para o botão "Continue" usando o atributo "aria-label".
    0
  • Adriano•310
    @adriano-wbPosted over 1 year ago

    Este código parece estar bem escrito e organizado. No entanto, aqui estão algumas práticas recomendadas que você pode seguir para tornar o seu código ainda melhor:

    • Adicione comentários para fins de documentação: é sempre uma boa prática adicionar comentários em seu código para descrever o que cada parte faz. Isso ajuda outros desenvolvedores a entender seu código e facilita a manutenção futura.

    • Use classes e IDs significativos: as classes e IDs usados em seu HTML devem ser descritivos e significativos, para que outros desenvolvedores possam entender facilmente a função de cada elemento.

    • Use imagens com tamanhos otimizados: imagens pesadas podem retardar a velocidade de carregamento da página, portanto, é uma boa prática usar imagens com tamanhos otimizados para garantir que sua página carregue rapidamente.

    • Use a tag <header> para o cabeçalho do seu documento: você pode envolver o título da sua página em uma tag <header> para indicar que é o cabeçalho da página.

    • Adicione uma descrição ao ícone da aba: você pode adicionar uma descrição ao ícone da aba usando a tag <title> para tornar sua página mais acessível.

    Espero que essas práticas recomendadas ajudem a tornar seu código ainda melhor.

    0
  • Adriano•310
    @adriano-wbPosted over 1 year ago

    O seu código está com uma boa conduta, mas para melhorá-lo um pouco mais, aqui estão algumas práticas recomendadas que você pode seguir:

    • Use as tags semânticas apropriadas: as tags HTML devem ser escolhidas com base em seu significado semântico, e não apenas em seu estilo visual. Por exemplo, use <header> para o cabeçalho do seu documento, <main> para o conteúdo principal da página, <footer> para o rodapé etc.

    • Escreva um HTML válido: certifique-se de que seu HTML seja válido seguindo as regras da linguagem. Você pode usar ferramentas online como o validador W3C para verificar a validade do seu HTML.

    • Use arquivos externos para CSS e JavaScript: é uma boa prática separar o seu HTML, CSS e JavaScript em arquivos separados. Isso ajuda a manter o seu código organizado e torna mais fácil de mantê-lo.

    • Adicione comentários para fins de documentação: é sempre uma boa prática adicionar comentários em seu código para descrever o que cada parte faz. Isso ajuda outros desenvolvedores a entender seu código e facilita a manutenção futura.

    • Use classes e IDs significativos: as classes e IDs usados em seu HTML devem ser descritivos e significativos, para que outros desenvolvedores possam entender facilmente a função de cada elemento.

    • Use imagens com tamanhos otimizados: imagens pesadas podem retardar a velocidade de carregamento da página, portanto, é uma boa prática usar imagens com tamanhos otimizados para garantir que sua página carregue rapidamente.

    Espero que essas práticas recomendadas ajudem a tornar seu código ainda melhor.

    0
  • AbdouAI•350
    @AbdouAISubmitted over 1 year ago

    Hello! I couldn't figure out how to make a div's height the same as the page (not the screen or viewport) so when the sliding menu comes out, the dark background ,if the window's height is small, doesn't cover the entire site. any help will be appreciated,Thanks!

    lightBox/sliding menu/cart functionality

    1
    Adriano•310
    @adriano-wbPosted over 1 year ago

    Este código HTML já está bem organizado e com a estrutura básica necessária. No entanto, aqui estão algumas sugestões para melhorá-lo:

    • Use aspas duplas para todos os atributos HTML em vez de aspas simples para manter uma consistência. Por exemplo: href="index.html" em vez de href='index.html'.

    • Adicione uma descrição ao seu ícone do menu para torná-lo mais acessível. Por exemplo: <img src="images/icon-menu.svg" alt="Menu icon">.

    • Adicione um label ao seu ícone do carrinho para torná-lo mais acessível e também adicione um title que descreva o que o ícone faz quando clicado. Por exemplo:

    <button id="basket" aria-label="Shopping cart">
  <div class="cart-notif no-visible" id="cartNotif">0</div>
  <svg width="22" height="20" xmlns="http://www.w3.org/2000/svg" title="View shopping cart"><path d="M20.925 3.641H3.863L3.61.816A.896.896 0 0 0 2.717 0H.897a.896.896 0 1 0 0 1.792h1l1.031 11.483c.073.828.52 1.726 1.291 2.336C2.83 17.385 4.099 20 6.359 20c1.875 0 3.197-1.87 2.554-3.642h4.905c-.642 1.77.677 3.642 2.555 3.642a2.72 2.72 0 0 0 2.717-2.717 2.72 2.72 0 0 0-2.717-2.717H6.365c-.681 0-1.274-.41-1.53-1.009l14.321-.842a.896.896 0 0 0 .817-.677l1.821-7.283a.897.897 0 0 0-.87-1.114ZM6.358 18.208a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm10.015 0a.926.926 0 0 1 0-1.85.926.926 0 0 1 0 1.85Zm2.021-7.243-13.8.81-.57-6.341h15.753l-1.383 5.53Z" fill="#69707D" fill-rule="nonzero"/></svg> 
</button>

    • Adicione um atributo alt à sua imagem de avatar para torná-la mais acessível. Por exemplo: <img src="images/image-avatar.png" alt="User avatar">.

    • Certifique-se de adicionar um texto alternativo significativo para todas as imagens, para tornar o seu site mais acessível e amigável aos mecanismos de busca.

    • Adicione comentários ao seu código para explicar o que cada seção faz. Por exemplo: ou. Comentários úteis

    Marked as helpful
    1
  • Adriano•310
    @adriano-wbPosted over 1 year ago

    Gostei amigo, ficou muito bem elaborado. O que recomendo mesmo é o uso de tags semânticas da HTML5 como por exemplo a tag main e também inserir o rodapé dado pelo arquivo, tirando isso tudo ok.

    0