Replies: 1 comment 1 reply
-
|
Fala @vitorvd tudo bem? Eu avaliei somente a estrutura da sua página vou contribuir com alguns pontos de possíveis melhorias. FerramentasPara fazer essa avaliação eu utilizei o validador de HTML da W3C e o Access Monitor Recomendações:Declarar o idioma principal da páginaDeclarar o idioma da página (auxilia tradutores como Google Translate e leitores de tela), você pode aprofundar no assunto; A dica aqui e na tag Exemplo: <html lang="pt-br">Um detalhe que percebi você utiliza no menu principal, alguns termos em inglês, então seria prudente colocar o indicativo dessas palavras em inglês. Ficaria assim: <nav>
<!-- menu default -->
<ul class="menu-desktop">
<li><a href="hi.html"><span lang="en">hi</span></a></li>
<li><a href="#"><span lang="en">jobs</span></a></li>
<li><a href="#"><span lang="en">contact</span></a></li>
</ul>
<!-- só será exibido quando clicado no menu hamburger -->
<ul class="menu-mobile">
<li><a href="hi.html"><span lang="en">hi</span></a></li>
<li><a href="#"><span lang="en">jobs</span></a></li>
<li><a href="#"><span lang="en">contact</span></a></li>
<li><i class="menu-link fas fa-times"></i></li>
</ul>
<i class="menu-hamburguer fas fa-bars"></i>
</nav>Retirar atributo type da tag <script>Com o advento do HTML5, não se faz necessário usar o atributo Uso do Font AwesomeAqui é mais um macete opte usar SectionsProcure utlizar headings entre Cards de PortfólioUma curiosidade, pessoas que usam um leitor de telas podem navegar através de links, com a tecla "L" do teclado ela irá pular de link a link na página. Ao chegar no link "Ver aplicação" ele não saberá para onde esse link direciona, nesse caso você pode fazer duas coisas:
Descrever melhor o linkTalvez pensar em uma forma que descreva o conteúdo seja uma boa opção. Texto ocultoVocê pode fazer algo, como: <div class="card-text">
<!-- considerando que você utilizei no titulo da section um h2 -->
<h3>Portfólio</h3>
<p>Meu primeiro website profissional, feito com paciência, muito estudo e carinho.
A única finalidade é de aprendizado, desta forma, o torno open source!</p>
<a href="#">Ver aplicação <span class="sr-only">do meu site</span></a>
</div>Descrever os links no FooterUma boa prática é descrever os links do rodapé do site. As redes sociais da forma que você desenvolveu se o script do Font Awesome não carregar por algum motivo, ele ficará em branco e sem nenhuma informação. Recomendaria você dar uma pesquisa sobre uma classe chamada Um exemplo: <footer>
<div>
<a href="https://twitter.com/_vitorvd" target="_blank" rel="noopener noreferrer">
<span class="fab fa-twitter" aria-hidden="true"></span>
<span class="sr-only">Twitter (abre em uma nova aba)</span>
</a>
<a href="https://github.com/vitorvd" target="_blank" rel="noopener noreferrer">
<span class="fab fa-github" aria-hidden="true"></span>
<span class="sr-only">Github (abre em uma nova aba)</span>
</a>
<a href="https://www.linkedin.com/in/vitor-versiani-8b5b05150/" target="_blank" rel="noopener noreferrer">
<span class="fab fa-linkedin-in" aria-hidden="true"></span>
<span class="sr-only">Github (abre em uma nova aba)</span>
</a>
</div>
</footer>Espero que tenha ficado claro, qualquer dúvida só chamar =) |
Beta Was this translation helpful? Give feedback.
-
|
Valeu pelas dicas ;) |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Oi amigxs, tudo bem? Espero que sim!
Comecei levar a sério o desenvolvimento web há uma semana e tentei centralizar todos os conhecimentos adquiridos ao longo dessa pequena jornada em um só web-site(https://github.com/vitorvd/vitorvd-project), fiz ele com intuito de ser um portfólio no futuro.
Venho aqui, pedir encarecidamente a vocês me passem um feedbeck em relação ao meu código, dicas, sugestões e ideias para melhorar o site mesmo.
Link para o repositório: https://github.com/vitorvd/vitorvd-project
#Features:
Deixo aqui meu agradecimento a todos que contribuírem.
Beta Was this translation helpful? Give feedback.
All reactions