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 Tuzzolino
      Boa tarde gente,
       
       
      Estou fazendo  um site  e  na hora que eu vou compartilhar ele no whatsapp  ele tá pegando o link corretamente mas ao invés de aparecer o titulo aparece somente o description  e não pega a miniatura da imagem  alguém tem algum exemplo de como  deveria ser ?
       
       
      A  imagem  é carregada assim 
       
      <amp-img height="320" width="470" id="img" src="890x610.jpg" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="responsive"><i-amphtml-sizer style="padding-top: 68.0851%;"></i-amphtml-sizer><img decoding="async" amp-img-id="img" src="890x610.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>  
    • By prometheusz
      Amigos bom dia, sou novo aqui
      Tenho a seguinte tabela  :
       
       
      gostaria de capturar os ids quando fosse clicado no botão pegar valor do codigo porem do jeito que fiz ele só captura o 88 nao importa qual mlinha eu clique ele so captura o numero 88
       
      codigo:

       
      <script> $(function () { $(document).on('click', '.btn-danger', function (e) { e.preventDefault; var codigo =document.getElementsByTagName('th')[5].innerHTML; alert(codigo) }); }); </script> <?php while ($dado = ibase_fetch_object($consulta_retorno)){ ?> <tr> <th data-title="ID"><?php echo ($dado->ID)?> </th> <td data-title="Nome"><?php echo utf8_encode($dado->NOME)?></td> <td data-title="DataCompra"><?php echo date("d/m/Y", strtotime($dado->DATACOMPRA))?></td> <td data-title="Email"><?php echo utf8_encode($dado->EMAIL)?></td> <td> <button class="btn-danger">Pegar Valor do Código</button></td> </tr> <?php }?>  
       
    • By gbL078
      Consegui resolver o problema, por favor podem deletar o tópico.
    • By guzulino
      Então... eu preciso inserir uma paulada de dados em um banco de dados de vez em quando, eu até consigo importar de um CSV pro banco, mas eu preciso fazer isso através do php e eu não tenho nem ideia de como fazer isso, procurei por aqui e não achei, se alguém tem alguma resposta ou referência, manda o link que eu vou dar uma olhada. Valeu.
    • By andre2654
      Bom dia, peço humildemente a ajuda de vocês,
      Enfim, estou fazendo um exemplo de site, só para teste mesmo, onde terá uma janela principal perguntando em qual site a pessoa quer ir(1 só empresa, porém dois negócios) ai se a pessoa clicar em alguma das melecas, quero que ela abra mostrando o site, ou só uma imagem mesmo

×

Important Information

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