Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Por favor, gostaria de opniões sobre esse site :
Como está meu HTML/CSS, digo o desenvolvimento front-end, sou iniciante.
O visual está ficando legal? É um site teste, um pseudo currículo.
HTML
1-) Defina o idioma da página: *<html lang="pt-br">*
2-) Retire <meta http-equiv="refresh" content="5"> pois não há razão para recarregar a página a cada 5s.
3-) Leia [https://gist.github.com/lancejpollard/1978404](https://gist.github.com/lancejpollard/1978404) para saber quais meta tags inserir na seção head.
**CSS**
Use declarações CSS na forma abreviada.
Por exemplo:body {
...
background-color: #ffffff;
background-image: url(../images/bg14.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1920px 1080px;
...
}
substitua por:body {
background: url(../images/bg14.jpg)/1920px 1080px no-repeat fixed #fff;
} h2 {
border-left-color: green;
border-left-style: solid;
border-left-width: 4px;
border-bottom-color: green;
border-bottom-style: solid;
border-bottom-width: 2px;
...
}
substitua porh2 {
border: solid green;
border-width: 0 0 2px 4px;
}
e outras declarações na sua CSS.parabens
Responsividade
Atualmente, é comum o acesso através de dispositivos móveis, portanto, não podemos nos dar ao luxo de não querer criar um projeto que se adapta a todas as telas.
/applications/core/interface/imageproxy/imageproxy.php?img=https://i.imgur.com/zrbrLLq.jpg&key=583110a8d125cdac1f35b1fd50817283690fd1020ffd15ab798a33f7751fb197" style="width:570px;height:auto;" width="1000" alt="zrbrLLq.jpg" />
Seu site está pecando, na apresentação para dispositivos móveis. Isso não é bom!
Dessa maneira, é mandatório que desenvolvedores estudem sobre responsividade web e mobile first. Assim, por exemplo, você seria capaz de apresentar o currículo em qualquer dispositivo que o recrutador quiser, sem frustrações.
Semântica
Além de um site que se adapta à diversas telas, também precisamos criar uma boa relação com as ferramentas de pesquisas e usuários que possuem problemas visuais.
Dado isso, devemos nos atualizar e utilizar o padrão HTML5, o qual dispõe diversos elementos HTML semânticos (que possuem significado).
<body>
<div id="container"> // Poderias utilizar a tag main aqui, por exemplo.
<div class="box01"> // Um elemento nav atrelado com listas e âncoras, talvez?
<a href="http://www.facebook.com.br/" target="_blank"><div id="icon01"></div></a>
<a href="http://www.twitter.com/" target="_blank"><div id="icon02"></div></a>
<a href="https://plus.google.com/" target="_blank"><div id="icon03"></div></a>
<a href="https://www.linkedin.com/" target="_blank"><div id="icon04"></div></a>
</div>
...
</div>
</body>
</html>
Por isso, não é interessante que utilizemos a tag *div* muitas vezes, pois, ela não possui um significado relevante para motores de busca e leitores de tela. Dessa forma, quando deixamos de usar elementos semânticos como *main*, *article* e *nav*, dificultamos nossa indexação em *search engines* e navegação de usuários cegos, por exemplo.
**Conclusão**
Pensando no que apresentei, aconselho que estude e desenvolva sites responsivos para conseguir atingir um público maior, quando necessário.
Além do mais, ainda é bom que você estude mais sobre *SEO* e não deixe de aplicar. Afinal, você vai querer ser achado o mais fácil possível.
**Links úteis**Opa, tudo bem?
Acabei de olhar o site e ao meu ver está bom sim, tanto o visual quanto seus códigos css. Fazendo esses ajustes que a galera sugeriu vai ficar ainda melhor!
Não esqueça de usar o css reset no topo do seu arquivo css:
*{
margin:0;
padding:0;
border:0;
list-style:none;Sobre a responsividade, o site até está bom para resoluções menores, ele só começa a quebrar perto de resoluções mobile... abaixo tem uma postagem minha sobre responsividade que pode ser útil a você.
PS: Aquele menu flutuante de redes sociais é legal, mas vai te dar trabalho deixar responsivo rs.
Abraços, Doug.
Parabéns!
Muito bem desenvolvido, parabéns! excelente ideia.