Ingressar no desenvolvimento web muitas vezes começa pela criação de uma página simples, e para isso, é essencial dominar HTML, CSS e a poderosa Flexbox (caixa flexivel). Estas tecnologias formam a base para estruturação, estilização e posicionamento flexível de elementos em uma página.
Neste guia prático, guiaremos você passo a passo na criação de uma página web, utilizando não apenas os fundamentos do HTML e CSS. Mas também explorando as capacidades versáteis da Flexbox.
Seja você um iniciante curioso ou alguém em busca de aprimorar suas habilidades, este guia será seu parceiro confiável na jornada de criar uma página web simples e visualmente atrativa com a eficiência do Flexbox.
Preparação do Ambiente de Desenvolvimento
Antes de começarmos, é super importante que você tenha um local para seguir o que será apresentado nesta postagem. No caso de iniciantes, eu te indico uma plataforma que eu uso quando estou apenas criando código HTML, CSS e JavaScript.
Esta plataforma se chama CodePen. Nela você tera livre acesso para criar seus projetos e salvar o seus progresso no seu perfil.
Estrutura Básica com HTML
No segundo passo, começaremos criando a estrutura básica do HTML. Este código serve como um ponto de partida para a construção da nossa página web simples, utilizando elementos essenciais.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minha Página</title>
</head>
<body>
<div class="main-container">
<div class="navbar">
<h3>Minha Logo</h3>
</div>
<div class="header">
<h1>Seja bem vindo a nossa pagina!</h1>
</div>
<div class="section">
<h3>Nosso Material</h3>
<div class="cards">
<div class="card">
<div class="image">
<img src="imagem1.jpg" alt="Imagem 1">
</div>
<div class="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
<div class="card">
<div class="image">
<img src="imagem2.jpg" alt="Imagem 2">
</div>
<div class="text-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
</div>
</div>
<footer>
<p>Obrigado</p>
</footer>
</div>
</body>
</html>
Logo de inicio assim parece assustador, principalmente se você está começando a programar agora. Porém, eu te convido a dar uma olhada nesta postagem aqui onde eu explico com imagens como os “div”isores (tags) funcionam no HTML.
Dando uma olhada com calma no código acima, você entenderá como cada elemento pertence a outro elemento, sendo que um esta dentro do outro.
Isso é importante entender, pois cada elemento representa uma caixa que pode receber outras caixas, que também podem receber mais caixas… Dependendo do contexto do design.
Neste caso, iremos criar um layout simples, porém muito útil, utilizando o Flexbox para facilitar a modificação de cada caixa/elemento com o CSS.
Explicando cada elemento do HTML
Nessa altura, você já deve entender como as tags e elementos iniciais do HTML funcionam. Sendo assim, eu já irei pular para o código principal dentro do <body>.
Container principal do projeto
<div class="main-container">
. . .
</div>Dando uma olhada no código principal acima, você irá ver que ele é o primeiro (logo após o <body>). Este elemento é o container principal da página, pois é ele que recebe todos os outros containers (ou caixas).
Barra de navegação do projeto
<div class="navbar">
<h3>Minha Logo</h3>
</div>Logo adentrando o projeto, é visto um elemento com uma classe chamada “navbar”. Ela representa a barra de navegação do nosso projeto. Embora tenha apenas um logotipo, normalmente é usada para adicionar vários outros nomes clicáveis. Como Logo, Login, Artigos, Cadastrar e muito mais. No entanto, neste exemplo, deixei apenas um exemplo de logotipo para ocupar o espaço da barra de navegação.
O cabeçalho do projeto
<div class="header">
<h1>Seja bem vindo a nossa pagina!</h1>
</div>Logo abaixo da barra de navegação, você poderá ver um elemento com uma classe chamada “header”. Que em inglês significa cabeçalho.
Normalmente, nestas páginas, é onde os títulos e imagens são inclusos para mostrar para quem está chegando a informação principal da plataforma.
Entendendo a seção abaixo do cabeçalho
<div class="section">
<h3>Nosso Material</h3>
<div class="cards">
<div class="card">
<div class="image">
<img src="" alt="">
</div>
<div class="text-container">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
</div>
</div>
<div class="card">
<div class="image">
<img src="" alt="">
</div>
<div class="text-container">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labores</p>
</div>
</div>
</div>
</div>
A seção é um container qualquer que terá outros containers dentro dele, assim como o “main-container”. Neste caso, foi adicionado um subtítulo <h3></h3> no topo para explicar o que aquela parte significa na página.
Logo abaixo, temos um container chamado “cards” que recebe mais dois containers internos chamados “card”. Logo mais, você entenderá como eles se comportam e o porquê de estarem dessa maneira.
O rodape da pagina
<footer>
<p>Obrigado</p>
</footer>No contexto do código HTML, sendo o último mas não menos importante, o <footer></footer> é uma seção onde informações menos importantes são alocadas.
Como, muitas vezes, a realocação dos dados adicionados na barra de navegação, termos de privacidade, trabalhe conosco e muito mais. Normalmente, o footer é um lugar que é usado para adicionar seções que não estão muito dentro do contexto da página em si, porém é importante estarem alí.
Estilização Inicial com CSS
Nesta seção vamos adicionar estilos iniciais à nossa página utilizando CSS. Esses estilos serão aplicados ao HTML previamente definido, proporcionando uma apresentação visualmente agradável.
body {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif;
}
.main-container {
diplay: flex;
flex-direction: column;
margin: 5px;
}
.navbar {
display: flex;
height: 50px;
padding: 5px;
border: 2px solid #7cb9e8;
}
.header {
display: flex;
height: 50vh;
justify-content: center;
align-items: center;
background-color: #7cb9e8;
}
.section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.cards {
display: flex;
width: 100%;
justify-content: space-around;
margin-top: 20px;
}
.card {
display: flex;
flex-direction: column;
width: 200px;
border: 2px solid #7cb9e8;
border-radius: 5px;
}
.image {
background-color: #7cb9e8;
height: 100px;
}
.text-container {
padding: 10px;
}
p {
text-align: center;
}
footer {
display: flex;
justify-content: center;
height: 50px;
padding: 5px;
margin-top: 50px;
border: 2px solid #7cb9e8;
}Caso voce nao saiba o que CSS seja e seu proposito eu criei este post onde explico como os seletores funcionam e como eles adicionam estilos (cores, largura, tamanho posição etc..) para elementos do HTML.
Explicando brevemente sobre o Flexbox
Iremos usar o Flexbox para organizar as caixas/containers do projeto. Então, nesse caso, irei explicar brevemente como o mesmo é utilizado.
Antes de tudo, para usar o flexbox em um seletor é preciso adicionar a propriedade e valor display: flex; logo no topo das entradas, para que a caixa ou container se comporte como uma caixa flexível.
Quando você adiciona display: flex; em um elemento HTML usando CSS, está ativando o modelo de layout Flexbox nesse elemento. O Flexbox é um sistema de layout que permite organizar elementos de forma mais eficiente e flexível em um contêiner, especialmente útil para criar layouts responsivos e alinhar elementos de maneira mais intuitiva.
A propriedade display: flex; é aplicada ao contêiner pai, transformando-o em um contêiner flexível. Isso tem várias implicações:
Itens Filhos como Itens Flexíveis:
- Os elementos filhos diretos do contêiner flexível (itens flexíveis) se comportam de acordo com as regras do Flexbox, permitindo a manipulação de sua ordem, alinhamento, e distribuição de espaço.
Alinhamento Automático:
- O Flexbox facilita o alinhamento automático dos itens em relação ao eixo principal e ao eixo transversal do contêiner, sem a necessidade de calcular margens ou usar truques de layout.
Redimensionamento Proporcional:
- Os itens flexíveis podem se ajustar automaticamente para preencher o espaço disponível de maneira proporcional, facilitando o desenvolvimento de layouts responsivos.
Direção do Fluxo:
- Você pode especificar a direção do fluxo no contêiner (linha ou coluna), permitindo layouts flexíveis tanto horizontal quanto verticalmente.
Controle de Espaçamento e Alinhamento:
- Flexbox oferece controle granular sobre o espaço entre os itens, alinhamento, distribuição de espaço excedente e ordem dos elementos.
Design Responsivo Simplificado:
- Flexbox é particularmente útil para criar designs responsivos sem a necessidade de muitos media queries, pois os elementos podem se ajustar automaticamente ao tamanho do contêiner pai.
Em outras palavras esse e o padrao do CSS sem o flexbox:
Basicamente, quando não usamos o display: flex;, o padrão do CSS fica como display: block;, onde cada container filho ocupa toda a largura do container pai, e cada container filho fica abaixo do outro.
Já quando usamos o display: flex; para o container pai, esse é o comportamento recebido:
Com isso, temos um controle mais fácil e flexível dos containers filhos usando propriedades e valores específicos do flexbox para posicioná-los, espaçá-los e ajustar seu comportamento de acordo com o desejado.
Adicionando os estilos padrões para o corpo do projeto
Embora o nosso primeiro container seja o “main-container”, o seletor/elemento body tem um papel especial no nosso projeto.
body {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif;
}É através dele que tudo que colocarmos será mostrado na tela e, em alguns navegadores, o body vem com margens, preenchimento e fontes padrões. Sendo necessário o desenvolvedor removê-las.
No código acima, por exemplo, foi removida a margem e o preenchimento. Já no caso da fonte, foram atribuídas duas: a Roboto e a sans-serif. Pois, dependendo do navegador, elas podem variar, por isso é bom deixá-las com um padrão específico.
Definindo o estilo do container principal do projeto
.main-container {
diplay: flex;
flex-direction: column;
margin: 5px;
}Como podem ver, a classe foi usada como seletor para mirar onde o estilo será aplicado.
Neste caso e nos demais que estão por vir, será usado o Flexbox para organizar os containers, ok.
Sendo assim, para ter acesso à manipulação dos containers flexíveis, é adicionada a propriedade e valor display: flex;. Abaixo, temos uma nova propriedade flex-direction: column;, a qual muda a direção do container de linha (row) para coluna (column).
Dessa forma, todas as caixas filhas, diretas do main-container, estarão uma abaixo da outra.
Adicionando o flexbox para a barra de navegação
.navbar {
display: flex;
height: 50px;
padding: 5px;
border: 2px solid #7cb9e8;
}Muito bem, a essa altura, você já entendeu que é preciso adicionar o display: flex; para ter acesso ao Flexbox.
No caso do navbar, a única coisa necessária foi adicionar a propriedade e valor display: flex; para que o container se comporte da maneira como um navbar padrão. No caso, ele ocupa 100% da largura do espaço onde está inserido (quando não está dividindo espaço com outro container dentro de um container flexivel).
Daí, apenas será necessário adicionar a altura (height), a borda (border) e o preenchimento interno (padding) do container, baseando-se em sua necessidade.
Usando o flexbox para estilizar o cabeçalho da pagina
.header {
display: flex;
height: 50vh;
justify-content: center;
align-items: center;
background-color: #7cb9e8;
}Como dito na parte onde eu explico o HTML do cabeçalho (header) do projeto, ele é usado para trazer a primeira impressão da página. É onde ficam as imagens e o título principal da página.
Sendo assim, para estilizar o cabeçalho desta página, foi também usado o Flexbox. Porém, além da altura de 50vh e um tom de azul adicionado para o fundo, também foram usados dois “comandos” de comportamento do Flexbox para centralizar o texto.
São eles:
- justify-content:center;
- align-items: center;
Explicando a propriedade justify-content
A propriedade justify-content e ultilizada para organizar os containers filhos na horizontal.
No exemplo acima, este é o padrão em que o container pai com os containers filho fica ao acionar o Flexbox com o display: flex;. Que, no caso, seria o justify-content: flex-start;.
Sendo assim, caso precisemos que os containers filhos se alinhem no final do container, podemos usar a propriedade e valor justify-content: flex-end;.
Porém, na situação em que estamos, precisamos que o título (<h1>) do header, que é um container filho, se centralize na horizontal. E com isso, iremos usar a propriedade e valor do Flexbox justify-content: center;, centralizando o título da maneira que necessitamos.
Porém, caso esteja seguindo esse tutorial passo-a-passo, deve ter percebido que, embora você tenha conseguido centralizar o título na horizontal, deve ter percebido que o título está no topo do container header. Isso ocorre porque a altura do título <h1> é bem menor que a altura do container header.
Sendo assim, para centralizarmos o título na vertical, também iremos usar a propriedade e valor do Flexbox align-items.
Neste caso acima, podemos ver que os containers filhos já estão alinhados horizontalmente no centro. Porém, estão no topo do container pai, pois a altura do mesmo é maior que a dos containers filho.
Este é o padrão, pois ao iniciar o container pai como flex, os containers filhos são alinhados na vertical como flex-start também: align-items: flex-start;. O mesmo raciocínio do justify-content, porém na vertical, e caso tenha espaço.
Sendo assim, iremos centralizar o título também para o centro com a propriedade e valor justify-content: center;.
Muito bem, agora que já passei por essas partes do Flexbox, na próxima vez que tiver que explicá-las novamente, não irei entrar em muitos detalhes, tudo bem?😇
Caso tenha dúvidas, apenas dê um pulo nesta parte para esclarecê-las.😉
Organizando os containers da seção com flexbox
.section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.cards {
display: flex;
width: 100%;
justify-content: space-around;
margin-top: 20px;
}
.card {
display: flex;
flex-direction: column;
width: 200px;
border: 2px solid #7cb9e8;
border-radius: 5px;
}
.image {
background-color: #7cb9e8;
height: 100px;
}
.text-container {
padding: 10px;
}
p {
text-align: center;
}Se você estiver seguindo corretamente esta postagem, você já deve estar entendendo como os containers estão sendo alinhados com o Flexbox.
O section é o container pai (principal) neste caso. Podemos ver que, com o Flexbox, todos os containers filhos foram alinhados em direção de coluna. E também foram alinhados horizontalmente e verticalmente no centro.
Logo abaixo, temos um container filho (único) do container section. Que também se comporta como container pai. Neste caso, o container cards tem dois containers filhos card.
E você deve estar percebendo que esses dois containers estão alinhados com um espaçamento. Isso ocorre por conta da propriedade e valor do Flexbox que alinha os containers na horizontal: justify-content: space-around;, cujo o valor space-around significa (espaço ao redor).
Neste caso, um espaço é adicionado ao redor dos containers que antes estavam grudados.
Já o container card também é um container pai, pois ele também tem conteúdo (outros containers) dentro dele.
Sendo asim, como imaginamos um layout igual a um cartão, precisamos defini-los como tal. A organização é lida de cima para baixo. Então, neste caso, precisamos ativar o Flexbox para este container e defini-lo como coluna.
Simplificando o alinhamento do footer com o flexbox
footer {
display: flex;
justify-content: center;
height: 50px;
padding: 5px;
margin-top: 50px;
border: 2px solid #7cb9e8;
}Como o exemplo acima, o conceito e quase igual ao da barra de navegação.
- Ativar o flexbox
- Centralizer o container na vertical
- Adicionar estilos necessarios para o design como altura, margim e preenchimento interno.
Conclusão
Neste tutorial, exploramos o poder do Flexbox para criar layouts flexíveis e responsivos em desenvolvimento web. A compreensão do display: flex;, justify-content e align-items nos permite alinhar e posicionar elementos de forma eficiente.
No exemplo prático, vimos como aplicar esses conceitos na construção de um cabeçalho e seção de cartões em um site. Ao dominar o Flexbox, você ganha um valioso conjunto de ferramentas para criar interfaces web mais dinâmicas e adaptáveis.
Lembre-se, a prática constante é a chave para a maestria desses conceitos, então sinta-se à vontade para experimentar e aprimorar suas habilidades. O Flexbox é uma ferramenta poderosa que proporciona uma abordagem mais intuitiva e eficaz para o design de layouts web.
