Skip to content
Submitted over 1 year ago

Results-summary-component w/ Sass

adr99•410
@leorichy99
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

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

  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    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
    @leorichy99Posted over 1 year ago

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

    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

Please log in to post a comment

Log in with GitHub

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