Aprenda a criar a primeira seção de um site de forma eficiente, abordando desde a estruturação do header até a divisão do conteúdo em colunas usando CSS Grid e a importância da semântica no HTML.

Criando a Primeira Seção de um Site

Neste artigo, abordaremos em detalhes a criação da primeira seção de um site sobre um evento chamado ‘CCXP’. Vamos explorar a importância de estruturar o header do site e a criação da primeira seção, explicando conceitos importantes como:

  • O significado e a importância de uma seção em um site
  • Utilização do CSS Grid para dividir o conteúdo em colunas
  • A relevância da semântica no HTML para a estruturação do conteúdo
  • Estilização de elementos com IDs únicos
  • Espaçamentos, dimensionamento e posicionamento com CSS

O que é uma seção em um site?

Antes de criar a primeira seção, é importante compreender o conceito de ‘seção’ em um site. Uma seção é uma parte completa e com significado dentro de um site. Por exemplo, a primeira seção que será criada engloba:

  • O título do evento
  • Um parágrafo descritivo
  • O vídeo promocional
  • O contador de data

A importância da semântica no HTML

Ao criar as seções, é fundamental utilizar elementos HTML que tragam mais semântica e significado ao site. O uso de tags como <section>, <header> e <article> é preferível em comparação à tag <div>, pois estas denotam melhor o tipo de conteúdo que está sendo representado.

  • Benefícios das tags semânticas para a compreensão da estrutura do site
  • Ajuda aos buscadores e interpretadores de página a entenderem melhor a informação
  • Organização eficaz da informação por meio das tags semânticas

Divisão em colunas com CSS Grid

Para dividir a seção em duas colunas, o instrutor optou por utilizar o CSS Grid Layout, que permite estruturar o conteúdo em colunas e linhas, como uma tabela.

  • O CSS Grid Layout permite a estruturação do conteúdo em colunas e linhas, proporcionando uma organização semelhante a uma tabela.
  • A propriedade grid-auto-flow organiza automaticamente os elementos internos em colunas, lado a lado.
  • A propriedade grid-auto-columns determina o tamanho de cada coluna gerada automaticamente, permitindo a divisão igualitária do espaço horizontal disponível.

Trabalhando com IDs únicos no HTML

Para poder estilizar cada elemento da página separadamente, o instrutor explica a importância de utilizar IDs únicos no HTML.

  • IDs são apelidos dados a elementos específicos para selecioná-los com facilidade posteriormente no CSS.
  • Manter os IDs únicos em toda a página é essencial, evitando problemas causados por elementos diferentes com o mesmo ID.

Espaçamentos e dimensionamento com CSS

Utilizando os IDs definidos no HTML, o instrutor começa a aplicar regras de design no CSS para os elementos.

  • Aplicação de regras de design no CSS para os elementos utilizando IDs do HTML.
  • Definição de cores de fundo, cores do texto, tamanhos de fonte, espaçamentos externos e internos.

Resultado Final

Ao final das estilizações feitas no CSS, a primeira seção do site já está estruturada conforme o layout base, apresentando o título, descrição e vídeo promocional do evento.

  • Estruturação da primeira seção do site de acordo com o layout base após estilizações no CSS.
  • Apresentação do título, descrição e vídeo promocional do evento.

Conclusão

Neste artigo, você pôde acompanhar passo a passo a construção da primeira seção de um site sobre um evento fictício chamado CCXP.

  • Abordagem de conceitos importantes como semântica em HTML, CSS Grid Layout, uso correto de IDs para estilização, espaçamentos e dimensionamento.
  • Ênfase na importância de dominar esses conceitos para transformar layouts do Figma em sites responsivos utilizando apenas HTML e CSS.

Conclusão

Dominar os conceitos abordados é essencial para transformar layouts do Figma em sites responsivos, apenas utilizando HTML e CSS. Este guia fornece uma base teórica e prática para aplicar essas habilidades em projetos futuros.