Ir para conteúdo
zetabyte00

Opniões sobre meu HTML/CSS

Recommended Posts

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.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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 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 por

h2 {
 border: solid green;
 border-width: 0 0 2px 4px;
} 

e outras declarações na sua CSS.
 

Editado por Gabriel Heming
adicionar marcação de código
  • Gostei 1
  • +1 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

 

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

  • Gostei 1
  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

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;
box-sizing:border-box
}

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ê.

https://forum.imasters.com.br/topic/564332-criar-responsivo-pra-um-site-já-feito/?tab=comments#comment-2248366

 

PS: Aquele menu flutuante de redes sociais é legal, mas vai te dar trabalho deixar responsivo rs.

 

Abraços, Doug.

  • +1 2

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Incompetech
      Então.. a um tempo atrás eu fiz um post pedindo ajuda em relação a tooltip mas não obtive resposta, então decidi deixar essa funcionalidade para depois.
      Como disse na minha primeira pergunta eu estou praticando HTML / CSS / JS ... então comecei a fazer uma entrada para MU ONLINE que foi um dos jogos que mais joguei em épocas de LAN HOUSE. Então o que quero perguntar a vocês é o seguinte:

      Como podem ver nessa imagem acima ela tem um total de 10 itens que são icones pequenos que ao clicar neles logo ele irá dar loading na foto do item completo, gostaria de saber como fazer isso.
       
      No meu caso eu criei essa entrada no Photoshop: 
       
      E no caso gostaria de fazer a mesma coisa porém clicando nas setas que estão do lado da box como podem ver no centro da imagem.
      Para isto eu devo usar Js? E qual código devo usar, eu sou super perdido com Js.
      Agradeço desde já! :D

    • Por JeanTDZ
      Eu tenho um form com algumas informações etc. O form envia pro banco de dados e tudo mais, funcional.
       
      Alguém teria algum exemplo que após o submit, o form é transformado em pdf/doc e direcionado para uma pasta/ftp já criada.?
    • Por Artes Ussler
      Olá!
       
      Como eu faço uma barrinha abaixo do texto como essa da imagem apenas usando CSS?
       

    • Por Ruy Hoffmann
      Olá pessoal, boa tarde,
       
      Eu fiz um site, comprarei o domínio e hospedagem provavelmente ainda hoje (alguma sugestão de um bom provedor de domínios?) e já estou providenciando para que o site ficar no ar. Até ai tudo bem. Esse será um site comercial, então fiz as meta tags para melhorar nas buscas, to pesquisando sobre SEO, etc...
       
      Mas em pararelo fiz um OUTRO site completo também, que vai do index até diversas outras páginas, é um módulo administrativo financeiro que só terá acesso por mim e pela minha esposa. Estou pensando em colocar o acesso no mesmo domínio do site acima, algo do tipo a url do site comercial /admin/a_console.php (que é onde eu e minha esposa efetuaremos nosso login).
       
      Minha pergunta é: para este SEGUNDO SITE que vai trabalhar independente do primeiro eu não quero que as páginas dele apareçam nas buscas, nada, nadinha... Como faço isso? Seria algo do tipo uma INTRANET, onde é acessível pela internet, mas só aparece para quem tem a url da página de login. Alguém sabe como faço para NÃO aparecer?
       
      Obrigado,
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.