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 Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por joaon77@yahoo.com.br
      Olá pessoal!
      Criei um menu usando listas não ordenadas (ul, li) com as imagens dispostas horizontalmente. São quatro imagens. O problema é que uma das imagens aparece duplicada no layout. Não entendi. Segue o código:
      ... <span class="menuRedesSociais"> <ul> <li id="img1"><a href="#"</a></li> <li id="img2"><a href="#"></a></li> <li id="img3"><a href="#"></a></li> <li id="img4"><a href="#"></a></li> </ul> </span> span ul { margin: 0; padding: 0; } span li { list-style: none; display: inline-block; } span a:link, a:visited { padding: 15px; } li#img1 a{ background-image: url("#img1"); background-repeat: no-repeat; } li#img2 a{ background-image: url("#img2"); background-repeat: no-repeat; } li#img3 a{ background-image: url("#img3"); background-repeat: no-repeat; } li#img4 a{ background-image: url("#img4"); background-repeat: no-repeat; } A imagem que aparece duplicada é a img2. Obs. Já fiz o teste trocando a posição das imagens, só que o problema continua.
       
      Agradeço muito se alguém puder me ajudar.
       
    • Por rodrigoalgeri
      BOA NOITE
      OLHA ISSO onde esta escrito isso aqui "Health star ratings Kellogg reveals the cereal Rodrigo Algeri", tem uma pequena imagem em cima se voce perceber ela e uma imagem redonda so que nao aparece inteira voce sabe algum jeito pra aparecer ? tipo ela tem que ficar 75px altura e largura a altura fica, so que ela corta, EU GOSTARIA QUE FICASSE UM QUADRADO TIPO 75PX X
      75PX E ISSO E PRA FICAR EM TODAS ESSAS IMAGENS AI QUE TEM 

    • Por bessa238
      Bom dia galera, estou tendo um problema com meu código, eu trago os dados do banco mas tenho 2 SELECT dependentes, um com estado e a cidade, segue o código
                  $.when(                 $('#estado').val(data.estado), //o valor da option no select estado ( já está preenchido com os values desde o carregamento da página ) é setado.                 $('#estado').change()) //o método change() é chamado para que o carregamento das cidades no select 2 ( cidades ) é feito.             .then(function() {                 $('#cidade').val(data.cidade); //deveria setar a cidade vinda do banco como a option no select.             }); funcional apenas até a parte do $('#estado').change(), a cidade ( vinda do banco ) é até setada por um breve momento, questão de 0,25 segundos, depois o valor que aparece na cidade é alterado e setado como a primeira option dentre todas opções do select. Alguém já passou por tal problema ? estou a um tempo atrás de solução e não consigo obter nenhuma resposa, porém sei que é possível fazer como isso é apenas um formulário de cadastro para edição, muitos outros sistemas e sites usam este recurso. Desde já, obrigado a todos !
    • Por MateusOFCZ
      Olá, estou desenvolvendo um BOT utilizando java, javascript e node.js, gostaria de saber se tem como eu fazer um painel em java (arquivo executável) onde tem um campo de texto (Que é digitado um tema, exemplo "Brasil"), uma lista com 3 itens (Quem é, O que é e A história do(a), você iria selecionar, por exemplo no campo de texto você digitou "Brasil" e na lista você selecionaria "A história do(a)"...) como faço pra quando clicar no botão "Enviar" ele iria executar um comando em node.js adicionando as informações (Tema e Opção).

       


      Caso não tenha entendido posso tentar explicar de uma forma mais clara!
×

Informação importante

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