Desenvolvedor Web Blog

Criando um sistema de grid. Ter um site responsivo é muito importante, um site que é responsivo consegue se reconfigurar automaticamente de acordo com o tamanho e tipo de dispositivo que o visitante estiver utilizado. O sistema de grid permite que o site seja responsivo, muitas páginas da web são baseadas em Grid, isso significa que a página é dividida em colunas e assim fica mais fácil para colocar o elemento na página. Muitas vezes o sistema de grid possui 12 colunas, sendo que o tamanho total da tela sempre é 100% não importando o dispositivo usado. Para funcionar o sistema de grid é necessário uma <meta> tag conhecida como viewport , esteja colocada acima da tag <title> . <meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-widthparte: Define a largura da página, para acompanhar mudança da largura do dispositivo (que irá variar dependendo do dispositivo). A initial-scale=1.0: Define o nível d...

Usando o seletor nth-child ( ) O seletor nth-child( ) é usado para marcar determinado local ou linha, possibilitando aplicar vários estilos no local escolhido. Este seletor costuma ser usando em tabela , lista , parágrafo , spam e outros . Dentro do ( ) vão estar as instruções podendo ser em nome ou número possibilitando fazer diversas combinações para atender sua necessidade.  Exemplo de seletores nth-child(odd): Representa as linhas impares “modo simples e não permite maiores alterações”. nth-child(even): Representa as linhas Pares “modo simples e não permite maiores alterações”. nth-child(3): Representa o número da linha que deseja aplicar o estilo e sem repetição. nth-child(2n): Representa as linha que deseja aplicar o estilo, neste caso existe repetição, nth-child(2n+1): Representa a linhas impares, o 2n é a sequência de um sim e um não e o +1 representa a linha que vai iniciar. nth-child(0n+4): Representa que não foi escolhida um sequencia...

Semântica O HTML5 oferece vários elementos semântico para definir diferentes partes em seu código, permitindo que um motor de busca identifique cada área da página a partir de suas Tags específicas. Tags HTML5 para estruturar a página Tag header: Define um cabeçalho de uma página. Tag nav: Define links de navegação como por exemplo um simples menu. Tag figure: Define que dentro contem imagem. Tag main: Definir o conteúdo principal da página ou da aplicação “ usar somente uma vez por pagina”. Tag section: Define uma seção em um documento. Tag article: Define um artigo e deve ser algo independente como uma postagem em um blog ou comentário. Tag aside: Define um conteúdo secundário de uma página, como um menu lateral ou um banner de anunciantes. Tag details: Especifica detalhes adicionais que o usuário pode exibir ou ocultar sob demanda. Tag footer: Define um rodapé de uma página. Exemplo da estrutura. <header> <!-- Inicio --...