Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Results-summary-component w/ Sass

adr99 410

@leorichy99

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Just began learning Sass. Thought it'd be good trying it out with this challenge . How did I do guys ?

Community feedback

@0xabdul

Posted

Hello Developer well Congrats on Successfully finished the Results summary component

  • A Few Feedback for improve your code
  • In Html📃 :
  • LANDMARK 🚀
  • The main landmark should be a top-level landmark. When a page contains nested document and/or application roles (e.g. typically through the use of iframe and frame elements), each document or application role may have one main landmark. If a page includes more than one main landmark, each should have a unique label.
  • To Clear the Accessibility reports use the Semantic elements Or non - Semantic elements
  • Note This Elements are don't sikp
  • semantic elements : <aside> , <artical> , <main>, <header> ,<section><footer>, <form> ect..
  • non- semantic elements : <div> , <span> ect ...
  • for easy way to clear the Accessibility reports using non semantic elements Ex :
<body>
<div class="container" role="main">
/html code goes here : 📃
</div>
</body>
  • Or
  • using semantic elements
  • Ex :
<header>
should be put heading or logo📸
</header>
<nav>
//Links here
</nav>
<main>
Main of the contents 📃
</main>
<footer>
©copy right  here📍
</footer>
  • I Hope you find the solution and it's useful for you and your project is great Happy Coding Developer

Marked as helpful

0

adr99 410

@leorichy99

Posted

@0xAbdul have made the changes.. Thanks for the feedback mate 😍

0
Adriano 310

@adriano-wb

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord