Skip to content
OverviewSolutions
14
Comments
10

Adriano

@adriano-wbBrasil, São Paulo330 points

I'm a creator on the rise, I'm in the field of Front-end, HTML, CSS, JS, jQuery, SASS, Bootstrap 5 and Angular I believe to be my strength at the moment.

I’m currently learning...

I'm currently getting familiar with React.JS, improving my JS knowledge with new 2023 features, and understanding advanced techniques for dealing with accessibility.

Latest solutions

View more solutions

Latest comments

  • Adriano•330
    @adriano-wb

    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
  • Adriano•330
    @adriano-wb

    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.

  • Adriano•330
    @adriano-wb

    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
  • Adriano•330
    @adriano-wb

    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
  • Adriano•330
    @adriano-wb

    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
  • Adriano•330
    @adriano-wb

    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".
View more comments