Jump to content
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.

 

 

Share this post


Link to post
Share on other 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.
 

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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By betezek
      Prezados,
      tenho uma div abaixo:
      eu gostaria de centralizar o nome dentro da imagem. o problema é que ela não centraliza, começa left e eu já tentei todos os comandos.
      eu preciso que ela já centralize no espaço!!!
      VOU USAR UM INPUT PARA DIGITAR O TEXTO!
       
       
       
      <BODY>
      <style>

      .divLeft {
          width: 140;
          height: 100px;
          float: center;
          position: relative;
      }
      #spaceText {
          padding-right: 110px;
      }
      #photo {
          width: 320px;
          height: 300px;
      }
      .textDiv{
         position: absolute;
         
         text-align: center;
      font-family:Arial;
        color: #000000;
        font-size: 9px;
        font-weight: NORMAL;
        left: 22px;
        top: 250px;
         
        
      }
      </style>
      </head>
      <body>

      <div class="divLeft">
          <img id="photo" src="imagens/jumba.png">
          <div class="textDiv">
              <h2><i id="spaceText" class="fas fa-search"></i>CENTRALIZAR</h2>
          </div>
      </div>
      </BODY>
    • By Felper
      É possível fazer uma imagem .png mover-se por uma tela de Canvas (esquerda, direita, cima, baixo)? Poderiam mostrar um exemplo caso seja possível. É que estou tentando fazer um jogo, onde o jogador se move em um labirinto. O jogador seria uma imagem. Agradeço desde já!
    • By joao b silva
      amigos é o seguinte, eu crio um grid dinamicamente com bootstrap, porem a depender do conteúdo as colunas, na mesma linha ficam com tamanhos (height) diferentes, o que não acontece quando utilizamos <table></table>. Como posso resolver isso?
    • By Alessandro Bodão
      Eai pessoal!
       
      Estou trabalhando em um site WordPress do qual foi me passado a versão demo de um tema (Ample).
       
      O problema é o seguinte: Parece não existir nenhum lugar onde eu tenha acesso pra editar todos os textos e conteúdos (Ex: Os textos padrões do tema parecem ser inacessíveis).
       
      Já fucei praticamente todo o wp-admin e os demais painéis e nada... Já tentei baixar o plugin  Elementor pra ver se me facilitava nisso e nada... Já tentei ver se conseguia achar esses conteúdos e editar pelo código das páginas php do tema e nada. Não sei mais o que fazer, por gentileza peço ajuda.
       
      Tema: https://themegrilldemos.com/ample/
      Site: https://onecv.com.br/
       

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.