DEV Community: Lorena

Aprenda a utilizar o Flexbox para criar layouts flexíveis

Lorena — Tue, 27 Jun 2023 14:42:56 +0000

O Flexbox é uma técnica de posicionamento de elementos HTML que permite criar layouts flexíveis e responsivos. Com o Flexbox, você pode facilmente organizar e alinhar elementos na página, tornando o design mais dinâmico.

Neste artigo, vamos explorar os principais conceitos do Flexbox e fornecer exemplos práticos para ajudar você a entender como utilizá-lo.

Display:flex

Antes de começar a utilizar o Flexbox, é importante definir o contêiner pai como um elemento flexível. Isso é feito definindo a propriedade CSS display com o valor flex no contêiner pai. Veja o exemplo abaixo:

<style>
  .container {
    display: flex;
  }
</style>

<div class="container">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

Flex-direction

A propriedade flex-direction define a direção do eixo principal do contêiner flexível. Ela pode ter quatro valores possíveis: row, row-reverse, column e column-reverse. O valor padrão é row. Veja os exemplos:

<style>
  .container {
    display: flex;
    flex-direction: row; /* Valor padrão */
  }

  .container-reverse {
    display: flex;
    flex-direction: row-reverse;
  }

  .container-column {
    display: flex;
    flex-direction: column;
  }

  .container-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
</style>

<div class="container">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

<div class="container-reverse">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

<div class="container-column">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

<div class="container-column-reverse">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

Justify-content e align-items

As propriedades justify-content e align-items são utilizadas para alinhar os elementos no eixo principal e no eixo transversal, respectivamente. Elas podem receber valores como flex-start, flex-end, center, space-between, space-around e stretch. Veja o exemplo a seguir:

<style>
  .container {
    display: flex;
    justify-content: center; /* Alinhamento horizontal */
    align-items: center; /* Alinhamento vertical */
    height: 300px;
  }
</style>

<div class="container">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
</div>

Flex-wrap e align-content

A propriedade flex-wrap controla a quebra automática dos elementos quando o espaço disponível é insuficiente. Ela pode receber os

valores nowrap, wrap e wrap-reverse. Já a propriedade align-content é usada para alinhar as linhas de elementos em contêineres de várias linhas. Ela aceita os mesmos valores que justify-content. Veja o exemplo abaixo:

<style>
  .container {
    display: flex;
    flex-wrap: wrap; /* Quebra os elementos em várias linhas */
    align-content: center; /* Alinha as linhas no centro */
    height: 300px;
  }
</style>

<div class="container">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
  <div>Elemento 3</div>
  <div>Elemento 4</div>
  <div>Elemento 5</div>
  <div>Elemento 6</div>
</div>

Flex-grow, flex-shrink e flex-basis

As propriedades flex-grow, flex-shrink e flex-basis são utilizadas para controlar o tamanho e o comportamento de crescimento e encolhimento dos elementos flexíveis. O flex-grow define a proporção em que os elementos devem crescer em relação aos outros elementos. O flex-shrink define a proporção em que eles devem encolher. Já o flex-basis define o tamanho inicial dos elementos. Veja o exemplo abaixo:

<style>
  .container {
    display: flex;
    height: 200px;
  }

  .item {
    flex-grow: 1; /* Todos os itens crescem igualmente */
    flex-shrink: 0; /* Os itens não encolhem */
    flex-basis: 0; /* Tamanho inicial igual para todos */
  }

  .item:last-child {
    flex-grow: 2; /* O último item cresce em dobro em relação aos outros */
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

Mais exemplos para te ajudar a fixar:

Vamos começar com um exemplo muito simples, resolvendo um problema quase diário: o alinhamento perfeito no centro. Com o flexbox é bem simples:

.pai {
display: flex;
height: 300px; /* ou o valor que você desejar */
}

.filho {
width: 100px; /* ou o valor que você desejar */
height: 100px; /* ou o valor que você desejar */
margin: auto; 
}

Definir uma margem como auto fará com que o item fique perfeitamente centrado nos dois eixos.

Agora vamos explorar algumas propriedades extras. Imagine uma lista com 6 itens, cada um com um tamanho fixo, mas que podem se ajustar automaticamente. O objetivo é distribuí-los de forma equilibrada ao longo do eixo horizontal, para que, ao redimensionar a janela do navegador, tudo se adapte perfeitamente sem precisar usar media queries:

.container-flex {
  /* Primeiro precisamos criar um layout flexível */
  display: flex;

  /* Em seguida, definimos a direção do fluxo
e se permitimos que os itens quebrem linha */
  flex-flow: row wrap;
  /* Por fim definimos como o espaço restante é distribuído */
  justify-content: space-around;
}

Prontinho! Aqui você pode ver um exemplo usando esse código no Codepen, o resto do código é apenas estilização.

Vamos fazer diferente agora. Imagine que temos um elemento de navegação alinhado à direita no topo do nosso site, mas queremos que ele esteja centralizado em telas de tamanho médio e em uma única coluna em dispositivos pequenos.

Fazemos algo assim:

/* Telas grandes */
.navegacao {
  display: flex;
  flex-flow: row wrap;
  /* Isso alinha os itens à linha final no eixo principal */
  justify-content: flex-end;
}

/* Telas médias */
@media all and (max-width: 800px) {
  .navegacao {
    /* Em telas de tamanho médio, centralizamos distribuindo igualmente o espaço vazio ao redor dos itens */
    justify-content: space-around;
  }
}

/* Telas pequenas */
@media all and (max-width: 500px) {
  .navegacao {
    /* Em telas pequenas, não estamos mais usando a direção de linha, mas sim coluna */
    flex-direction: column;
  }
}

Aqui você pode ver um exemplo usando esse código no Codepen com o resto dos estilos aplicados.

Podemos brincar mais ainda com a flexibilidade dos itens. Vamos lá?

Faremos um layout de 3 colunas para dispositivos móveis, com cabeçalho e rodapé ocupando toda a largura.

.container {
  display: flex;
  flex-flow: row wrap;
}

/* Setamos para que todos os itens tenham largura de 100%, usando flex-basis. 

O seletor `> *` seleciona todos os elementos filhos diretos do elemento "wrapper". */

.container > * {
  flex: 1 100%;
}

/* Dependemos da ordem original para uma abordagem mobile-first
 * Sendo assim:
 * 1. cabeçalho
 * 2. artigo
 * 3. sidebar 1
 * 4. sidebar 2
 * 5. rodapé
 */

/* Telas médias */
@media all and (min-width: 600px) {
  /* Setamos que as duas barras laterais compartilhem uma linha */
  .sidebar { flex: 1 auto; }
}

/* Telas grandes */
@media all and (min-width: 800px) {
  /* Invertemos a ordem da primeira barra lateral e do conteúdo principal e dizemos que o elemento principal deve ocupar o dobro da largura das outras duas barras laterais */
  .main { flex: 3 0px; }
  .sidebar-1 { order: 1; }
  .main    { order: 2; }
  .sidebar-2 { order: 3; }
  .footer  { order: 4; }
}

Aqui você pode ver um exemplo usando esse código no Codepen, com o resto dos estilos aplicados.

Espero que este artigo tenha ajudado você a compreender o uso do Flexbox. Com esses exemplos e conceitos, você poderá criar layouts flexíveis e responsivos em suas páginas web.

Experimente e divirta-se explorando as possibilidades do Flexbox e se quiser compartilhar o que fez sinta-se livre. 🙂

Explorando as diferenças entre HTML, CSS e JavaScript

Lorena — Tue, 06 Jun 2023 11:33:39 +0000

Olá! Esse artigo é destinado a desvendar as diferenças entre HTML, CSS e JavaScript - três dos pilares fundamentais do desenvolvimento web. Vamos explorar cada um deles individualmente e, para ajudar na compreensão, mostrarei exemplos práticos.

Então, vamos nos aprofundar nesse fascinante mundo da web?

HTML: A estrutura básica

-HTML (HyperText Markup Language) é a base de qualquer página web. É uma linguagem de marcação usada para estruturar o conteúdo e definir os elementos de uma página. Pense no HTML como a estrutura esquelética que dá forma ao seu website. Vamos ver um exemplo simples:

<!DOCTYPE html>
<html>
<head>
  <title>Minha Página</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Este é um parágrafo de exemplo.</p>
</body>
</html>

Neste exemplo, temos uma página básica com um título, um cabeçalho e um parágrafo. O HTML permite a criação de elementos como títulos, parágrafos, links, imagens e muito mais. Ele fornece a estrutura fundamental para a apresentação do conteúdo.

CSS: Estilizando a aparência

Enquanto o HTML cuida da estrutura, o CSS (Cascading Style Sheets) entra em cena para adicionar estilo e tornar a página visualmente atraente. O CSS é responsável por definir a aparência, o layout e as cores de um documento HTML. Confira um exemplo:

<!DOCTYPE html>
<html>
<head>
  <title>Minha Página Estilizada</title>
  <style>
    h1 {
      color: blue;
      font-size: 24px;
    }
    p {
      color: green;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <p>Este é um parágrafo de exemplo.</p>
</body>
</html>

Nesse caso, adicionamos um bloco <style> ao cabeçalho HTML para aplicar estilos específicos aos elementos. No exemplo, estamos definindo a cor do título como azul e do parágrafo como verde, além de ajustar o tamanho das fontes.

Com o CSS, você pode controlar o posicionamento, a cor, o tamanho da fonte, os espaçamentos e muitos outros aspectos visuais.

JavaScript: Adicionando interatividade

Por fim, temos o JavaScript, uma linguagem de programação que permite adicionar interatividade e dinamismo a uma página web.

Com o JavaScript, é possível criar efeitos visuais, validar formulários, realizar chamadas assíncronas ao servidor e muito mais. Veja um exemplo básico:

<!DOCTYPE html>
<html>
<head>
  <title>Minha Página Interativa</title>
</head>
<body>
  <h1>Olá, mundo!</h1>
  <button onclick="alert('Você clicou no botão!')">Clique Aqui</button>
</body>
</html>

Neste exemplo, adicionamos um botão e, quando ele é clicado, uma caixa de diálogo é exibida com a mensagem "Você clicou no botão!".
O JavaScript oferece a possibilidade de interagir com elementos da página, manipular dados, responder a eventos e criar experiências interativas para os usuários.

Conclusão:

HTML, CSS e JavaScript são elementos essenciais para a construção de páginas web. Enquanto o HTML fornece a estrutura básica, o CSS é responsável pela aparência e o JavaScript adiciona interatividade. Juntos, eles criam experiências de usuário envolventes e funcionais.

Espero que este artigo tenha ajudado você a entender as diferenças entre essas três tecnologias-chave.

Agora é a hora de se dedicar e começar a elaborar suas próprias criações web!

A importância das Metatags

Lorena — Wed, 31 May 2023 14:22:07 +0000

Quando criamos um HTML de um site geralmente vemos essas três tags logo no comecinho do código:

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

E às vezes simplesmente as replicamos sem saber o que elas significam de fato.

Então, vamos conhecer um pouco delas?

Ao desenvolver um site, é crucial considerar as meta tags em HTML. Essas tags fornecem informações valiosas para navegadores, mecanismos de busca e dispositivos.

Neste artigo, exploraremos três meta tags essenciais: charset, http-equiv e viewport. Descobriremos a finalidade de cada tag e como seu uso correto pode melhorar a experiência da pessoa usuária, a compatibilidade do navegador e a otimização para dispositivos móveis.

Charset:

Essa tag especifica o conjunto de caracteres usado no documento HTML. O uso correto do conjunto de caracteres é essencial para garantir que caracteres especiais e acentos sejam exibidos corretamente.
O UTF-8 é amplamente recomendado, pois suporta uma ampla gama de caracteres e é compatível com a maioria dos idiomas.

Http-equiv:

Essa tag é usada para definir a compatibilidade do navegador. No exemplo fornecido no começo desse texto, "IE=edge" indica que o Internet Explorer deve usar a versão mais recente disponível, garantindo que o site seja renderizado corretamente.
Essa tag é especialmente útil para lidar com versões mais antigas do navegador que podem ter problemas de compatibilidade.

Viewport:

Essa tag é essencial para criar um layout responsivo e adaptável para diferentes dispositivos.
Ela define a largura e a escala inicial da janela de visualização do navegador. O valor "width=device-width" instrui o navegador a ajustar a largura do documento ao tamanho da tela do dispositivo, enquanto "initial-scale=1.0" define a escala inicial da página.
Essa combinação permite que os sites sejam exibidos corretamente em smartphones, tablets e outros dispositivos móveis.

Conclusão:

As meta tags em HTML desempenham um papel crucial na otimização e na compatibilidade de um site moderno.

Ao usar corretamente as tags charset, http-equiv e viewport, podemos melhorar a experiência da pessoa usuária, garantir a exibição correta de caracteres especiais, lidar com problemas de compatibilidade do navegador e criar layouts responsivos.

É importante incorporar essas tags corretamente em cada página do seu site para obter resultados consistentes e eficientes.

Lembre-se de que as meta tags são apenas uma parte do processo de desenvolvimento do site. Outras tags e melhores práticas também são importantes para melhorar a acessibilidade, a indexação pelos mecanismos de busca e a usabilidade geral do seu site.

Ao aplicar corretamente as meta tags em HTML e combiná-las com outras técnicas de desenvolvimento, você estará no caminho certo para criar uma presença online sólida e bem-sucedida.

Unidades de medida no CSS: escolhendo a melhor opção para cada caso

Lorena — Mon, 29 May 2023 20:06:08 +0000

Você já pesquisou sobre as unidades de medida no CSS e ficou bem em dúvida sobre qual usar e a diferença entre cada uma?

Nesse artigo irei te apresentar algumas opções e falar um pouco sobre elas para te ajudar a entender melhor.

Ao trabalhar com CSS, é essencial entendermos as diferentes unidades de medida disponíveis.

Cada unidade tem suas características e casos de uso em que se encaixam melhor. Analisaremos as unidades mais comuns, como pixels (px), porcentagem (%), em, rem, viewport height (vh) e viewport width (vw).

Vamos descobrir quando é melhor utilizar cada uma delas para obter resultados precisos e responsivos em nossos projetos?

Pixels (px):

O pixel é uma unidade de medida fixa, baseada na resolução do dispositivo.

É ideal para elementos com tamanhos estáticos, como bordas, margens e imagens.

Não se ajusta automaticamente em diferentes dispositivos, podendo resultar em layouts não responsivos.

Porcentagem (%):

A unidade de porcentagem é relativa ao tamanho do elemento pai.

Ela nos permite criar layouts fluidos e responsivos.

Útil para definir larguras, alturas e posições de elementos em relação ao tamanho de seus contêineres.

EM:

A unidade em é relativa ao tamanho da fonte do elemento pai.

É amplamente utilizada para definir tamanhos de fontes e espaçamentos.

Garante que os elementos se ajustem automaticamente quando o tamanho da fonte é modificado.

REM:

Similar à unidade em, mas relativa ao tamanho da fonte do elemento raiz (root).

Sendo muito útil para criar layouts escaláveis e facilitar o controle global do tamanho da fonte.

Recomendado para projetos complexos, onde é necessário um controle consistente sobre o tamanho da fonte.

Viewport Height (vh):

A unidade vh carcteriza uma porcentagem da altura total da janela do navegador.

É ideal para criar elementos que ocupam uma porção específica da altura da tela.

Útil para construir layouts responsivos e se adaptar a diferentes dispositivos.

Viewport Width (vw):

A unidade vw representa uma porcentagem da largura total da janela do navegador.

Ótima opção para criar layouts responsivos baseados na largura do dispositivo.

Essa unidade permite definir elementos que ocupam uma porção específica da largura da tela.

Conclusão:

Ao escolher a unidade de medida adequada no CSS, podemos criar layouts flexíveis, adaptáveis e responsivos. Cada unidade tem sua utilidade específica, e compreender suas características nos ajuda a tomar decisões informadas durante o desenvolvimento.

Logo, é essencial levar em conta fatores como a natureza do elemento, o contexto do projeto e os requisitos de responsividade ao selecionar a unidade de medida mais apropriada.

É fundamental ter em mente que o uso adequado das unidades de medida no CSS é essencial para garantir uma experiência consistente aos usuários em diferentes dispositivos e tamanhos de tela.

Pratique experimentar com essas unidades em seus projetos e observe como elas se comportam, afinal apenas praticando você ficará familiarizado com cada unidade de medida e conseguirá tomar decisões.

A escolha correta ajudará a criar designs mais flexíveis e harmoniosos em todas as plataformas.

Como subir seu primeiro repositório no GitHub: um guia passo a passo.

Lorena — Wed, 26 Apr 2023 21:14:13 +0000

Fazer o deploy do seu site é uma tarefa importante para torná-lo acessível na internet e alcançar um público maior. Por isso, subir seu repositório no GitHub é uma ótima maneira de compartilhar seu projeto e torná-lo disponível para outros usuários.

Para isso, você precisa ter certeza de que o git está instalado no seu computador.

1. Verificando a instalação

Você pode verificar a instalação no terminal ou com prompt de comando usando:

git --version

Caso ele não esteja instalado, você pode instalá-lo seguindo as instruções por aqui.

2. Configurando o Git

Configurar o Git é um passo importante para trabalhar com repositórios em seu computador. Felizmente, é fácil fazer isso usando alguns comandos simples no terminal. Siga as etapas abaixo para configurar suas informações de usuário:

Abra o terminal em seu computador.
Digite o seguinte comando para definir seu nome de usuário, substituindo "[nome]" pelo seu próprio nome:

git config --global user.name "[nome]"

Em seguida, digite o seguinte comando para definir seu endereço de e-mail, substituindo "[endereco-de-email]" pelo seu próprio endereço de e-mail:

git config --global user.email "[endereco-de-email]"

Essa parte está pronta. Mas lembre-se de adaptar os comandos para seu caso específico.

3. Criando um repositório

Para começar a usar o Git, é necessário criar um novo repositório no GitHub. Veja como fazer:

Acesse o seu GitHub e clique em "New".

Preencha as informações necessárias, que é basicamente escolher um nome para o repositório e escolher se quer público ou privado, indico que deixe público mesmo e clique em "Creat repository".

Na página do repositório recém-criado, salve o link HTTPS gerado.

4. Configurando projeto local

Agora que você tem o link HTTPS do seu repositório, é hora de configurar seu projeto local. Estou usando o VSCode para isso.

Abra o terminal do seu projeto com o atalho Ctrl + ' ou Ctrl + j.
Inicie a pasta como um repositório do Git através do comando:

git init

O git init é um comando do Git que cria um novo repositório Git em uma pasta existente. Em outras palavras, ele prepara uma pasta para que você possa começar a usar o Git para controlar as mudanças em seus arquivos.

5. Adicionando arquivos

Agora que você configurou o Git e iniciou o repositório, é hora de adicionar seus arquivos para preparar o commit. Para isso, utilize o seguinte comando no terminal do Visual Studio Code.

git add .

6. Criando commit

Em seguida, crie um commit para os arquivos que você deseja subir para o repositório. Utilize o comando:

 git commit -m "primeiro commit"

O comando git commit -m 'primeiro commit' é usado para salvar as mudanças que você fez no seu projeto em um registro permanente no Git. O texto dentro das aspas ("primeiro commit") é uma mensagem que você adiciona para explicar o que mudou no seu projeto desde o último commit.

O -m é de mensagem e ela ajuda outras pessoas a entenderem o que foi alterado e por que.

7. Subindo arquivos para o GitHub

Agora, é hora de subir seus arquivos para o GitHub. Lembra do link HTTPS que geramos no passo 3? Utilize o comando abaixo para adicionar o repositório remoto ao seu projeto local.

git remote add origin <link gerado>

O git remote add é a forma de dizer para o Git qual é o repositório remoto que deve ser usado para salvar as suas mudanças. É como se você estivesse indicando ao Git onde ele deve enviar as suas alterações para que elas possam ser salvas na nuvem.

8. Enviando arquivos para repositório remoto

Em seguida, utilize o comando:

git push -u origin master

Para enviar seus arquivos para o repositório remoto. Isso pode demorar um pouco, dependendo do tamanho dos arquivos, não se preocupe.

O git push é a forma de dizer ao Git que você quer enviar as suas mudanças para o repositório remoto. O -u significa "upstream", que é uma forma de definir o repositório remoto padrão para que você não precise digitar o nome do repositório toda vez que fizer o push.

O origin é o nome dado ao repositório remoto que você definiu anteriormente com o comando git remote add. Já o master é o nome da branch principal, onde geralmente estão as versões mais estáveis do seu código.

Prontinho! Agora você já pode visualizar seus arquivos no GitHub. Atualize a página do seu repositório e verá que eles estarão lá. Você pode usá-los para fazer deploy no GitHub Pages ou na Vercel. Muito legal, né?

Ah! Se você quiser enviar atualizações desse seu mesmo projeto, você não precisa fazer tudo isso de novo. Você só vai precisar usar os seguintes comandos para enviar as atualizações: git add ., git commit -m "mensagem do seu commit" e git push -u origin master.

É só lembrar de seguir essa ordem: adicionar as alterações, descrevê-las e enviá-las para o Github.

Espero que tenha te ajudado e comece a documentar o seu progresso no GitHub hoje mesmo. :)