Feat/css flexbox grid

content/css-flexbox-grid/1.Introducao/1.o-que-voce-vai-aprender.md

@@ -0,0 +1,27 @@
+---
+title: O que você vai aprender
+---
+
+## Quem é o instrutor
+
+Olá, seja bem vindo ao Menthor! Eu me chamo Edgar Muniz Berlinck, tenho 40 anos e trabalho com desenvolvimento de sistemas a mais de 23 anos. Atualmente sou Senior Fullstack Engineer na Volvo Group em Götemborg, Suécia e ao longo da minha carreira eu passei por empresas como IKEA, Pinterest, Voice, Newsela e muitas outras.
+
+Estive presente em praticamente toda a evolução da web, desde aqueles sites horrorosos que usavam table e eram centralizados na tela, depois aquela galhofa feita em flash que muitas vezes eram até divertidas de se ver. Depois veio o tabeless e a caça a bruxas começou a usar table passou a set "má pratica", mesmo quando o que eu queria era de fato uma tabela, foi a época das divs...
+
+Apesar de muitas mudanças, algo sempre esteve presente em nossas vidas: o CSS, que teve muitas evoluções até este exato momento em que você me lê e é o que vamos aprender hoje.
+
+## O que você vai aprender
+
+Esse curso vai set para quem nunca teve contato algum com CSS, então vamos aprender desde o início começando pelos seletores básicos, cores, tamanhos, medidas,  posicionamento e layouts e no fim teremos feito vários pequenos exemplos.
+
+É desejável que você tenha experiência prévia em HTML para fazer esse curso, não será necessária nenhuma ferramenta instalada vamos fazer tudo online usando o [Codepen](https://codepen.io/pen/) e só depois que você ja estiver entendendo bem, vamos aprofundar um pouco mais. Mas não se preocupe, tudo vai ser listado passo a passo.
+
+## Como funcionam as aulas e como tirar dúvidas
+
+As aulas serão todas em texto e você, depois de logado, poderá salvar o seu progresso. Toda vez que abrir um curso, e ir para a próxima aula, você terá a opção de "Finalizar aula", indicando que você concluiu a leitura daquela aula.".
+
+As aulas podem ou não ter tarefas, que podem ser enviar um texto ou uma imagem (printscreen do seu progresso). Os certificado será entregue apenas para as pessoas que concluiram todas as tarefas, que serão previamente revisadas pela nossa equipe.
+
+As tarefas ficam localizadas lá no rodapé da aula.
+
+As dúvidas que surgirem durante as aulas devem ser tiradas no discord. _Tá Edgar, mas por que no discord?_ Porque é uma ferramenta muito conhecida e talvez a sua dúvida é a mesma dúvida do seu colega, dessa forma você poderá percorrer toda a lista de perguntas sobre o curso e/ou aula específica e conferir se outro aluno já passou pelo mesmo problema que o seu.

content/css-flexbox-grid/1.Introducao/2.antes-de-comecar.md

@@ -0,0 +1,26 @@
+---
+title: Antes de começar
+---
+
+## O que você precisa para começar o curso
+
+Primeiro de tudo, você precisa aprender a tirar print-screen, ou seja, tirar uma foto da tela do seu computador. Isso é importante para que você possa enviar as tarefas e também para que você possa tirar dúvidas no discord.
+
+## Abra o Codepen
+
+O Codepen é uma ferramenta online que permite você escrever código HTML, CSS e JavaScript e ver o resultado em tempo real. Para começar, abra o [Codepen](https://codepen.io/pen/).
+
+> Recomendo que você crie uma conta caso não tenha.
+
+Sua tela deve estar assim caso seja a primeira vez que esteja usando:
+![](https://raw.githubusercontent.com/menthorlabs/courses/main/images/html-basico/chrome_nE4GrFSPiK.png)
+
+> **Lembre-se**: Qualquer dúvida sobre essas etapas iniciais, mande uma mensagem no canal `#iniciantes` do discord.
+
+## Links uteis
+
+Esses links podem ser úteis para você durante o curso, não são obrigatorios mas podem ajudar.
+
+- [Codepen](https://codepen.io/pen/)
+- [HTML Cheat Sheet](https://htmlcheatsheet.com/)
+- [HTML Reference](https://htmlreference.io/)

content/css-flexbox-grid/10.flex-box/1.introducao.md

@@ -0,0 +1,99 @@
+---
+title: Flexbox
+---
+
+O Flexbox é um modelo de layout unidimensional, projetado para distribuir itens de maneira eficiente em um contêiner e, assim, lidar com os problemas mais complexos que envolvem layouts, espaçamento e alinhamento de itens em um contêiner.
+
+## Introdução ao Flexbox
+
+### Propriedades Básicas
+
+*display: flex;:* Como ativar o modelo de layout Flexbox em um contêiner.
+*flex-direction:* Controla a direção do eixo principal.
+*justify-content:* Alinha itens ao longo do eixo principal.
+
+```css
+.container {
+  display: flex;
+  flex-direction: row; /* ou column, dependendo da orientação desejada */
+  justify-content: center;
+}
+```
+
+### Alinhamento de Itens
+
+*align-items:* Alinha itens ao longo do eixo transversal.
+*align-self:* Permite que um item específico se alinhe de maneira diferente dos outros.
+
+```css
+.container {
+  align-items: center;
+}
+```
+
+## Distribuição de Espaço
+
+### Espaçamento entre Itens
+
+*justify-content:* Distribui espaço entre os itens ao longo do eixo principal.
+*align-content:* Distribui espaço entre as linhas no eixo transversal.
+
+```css
+.container {
+  justify-content: space-between;
+}
+```
+
+### Crescimento e Encolhimento
+
+*flex-grow:* Determina como os itens crescem em relação uns aos outros.
+*flex-shrink:* Determina como os itens encolhem em relação uns aos outros.
+*flex-basis:* Define o tamanho inicial dos itens antes da distribuição do espaço restante.
+
+```css
+.item {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0;
+}
+```
+
+## Layouts Avançados
+
+### Ordem dos Itens
+
+*order:* Controla a ordem dos itens no contêiner.
+
+```css
+.item:nth-child(1) {
+  order: 3;
+}
+
+.item:nth-child(2) {
+  order: 1;
+}
+
+.item:nth-child(3) {
+  order: 2;
+}
+```
+
+### Flex Wrap
+
+*flex-wrap:* Controla se os itens devem ser dispostos em uma única linha ou em várias linhas.
+
+```css
+.container {
+  flex-wrap: wrap;
+}
+```
+
+### Align Self
+
+*align-self:* Permite que um item específico se alinhe de maneira diferente dos outros.
+
+```css
+.item:nth-child(2) {
+  align-self: flex-end;
+}
+```

content/css-flexbox-grid/10.flex-box/2.exercicios.md

@@ -0,0 +1,23 @@
+---
+title: Exercícios Práticos
+---
+
+## Exercício 1: Configurando um Layout Básico
+
+Crie um contêiner flex com cinco itens dentro. Use justify-content para alinhar os itens no centro do eixo principal. Em seguida, use align-items para alinhar os itens no centro do eixo transversal.
+
+## Exercício 2: Distribuição de Espaço
+
+Crie um contêiner flex com três itens dentro. Use justify-content para distribuir o espaço uniformemente ao longo do eixo principal. Experimente também usar align-content para alinhar as linhas no eixo transversal.
+
+## Exercício 3: Ordem dos Itens
+
+Crie um contêiner flex com quatro itens dentro. Use a propriedade order para alterar a ordem dos itens e observe como isso afeta o layout.
+
+## Exercício 4: Flex Wrap
+
+Crie um contêiner flex com seis itens dentro. Use flex-wrap para fazer com que os itens sejam dispostos em duas linhas, se necessário, e experimente ajustar o tamanho dos itens para ver como eles se comportam quando a linha é quebrada.
+
+## Exercício 5: Configuração Avançada
+
+Crie um layout complexo usando Flexbox, incluindo itens que crescem e encolhem de maneira diferente. Utilize as propriedades flex-grow, flex-shrink, e flex-basis para ajustar o comportamento dos itens.

content/css-flexbox-grid/11.grid-layout/1.grid-layout.md

@@ -0,0 +1,27 @@
+---
+title: Grid Layout
+---
+
+O Grid Layout é um sistema bidimensional que permite criar layouts complexos e responsivos em CSS, dividindo a página em linhas e colunas. Ele oferece controle preciso sobre o posicionamento e o dimensionamento dos elementos.
+
+## Criando um grid básico
+
+### Definindo um grid
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr; /* Três colunas de larguras iguais */
+  grid-template-rows: 100px 200px; /* Duas linhas de alturas diferentes */
+  gap: 10px; /* Espaçamento entre as células do grid */
+}
+```
+
+### Colocando itens no grid
+
+```css
+.item {
+  grid-column: span 2; /* Um item ocupando duas colunas */
+  grid-row: 1; /* Um item ocupando a primeira linha */
+}
+```

content/css-flexbox-grid/11.grid-layout/2.alinhamento-e-responsividade.md

@@ -0,0 +1,34 @@
+---
+title: Grid Layout - Alinhamento e Responsividade
+---
+
+## Horizontal
+
+```css
+.container {
+  justify-items: center; /* Alinha os itens horizontalmente no centro */
+}
+```
+
+## Vertical
+
+```css
+.container {
+  align-items: end; /* Alinha os itens verticalmente na extremidade inferior */
+}
+```
+
+## Criando um grid responsivo
+
+```css
+.container {
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  /* Cria um número automático de colunas com largura mínima de 150px */
+}
+```
+
+```css
+.item:nth-child(1) {
+  order: 3; /* Muda a ordem do primeiro item para 3 */
+}
+```

content/css-flexbox-grid/11.grid-layout/3.exercicios.md

@@ -0,0 +1,19 @@
+---
+title: Exercícios
+---
+
+## Exercício 1: Configurando um Layout de Blog
+
+Crie um layout de blog simples usando Grid Layout. Tenha uma área principal para postagens e uma barra lateral. Utilize diferentes colunas e linhas para organizar as postagens e outros elementos.
+
+## Exercício 2: Galeria de Imagens Responsiva
+
+Crie uma galeria de imagens usando Grid Layout. Faça com que as imagens se ajustem automaticamente ao tamanho da tela e se alinhem em um número variável de colunas.
+
+## Exercício 3: Layout de Formulário Complexo
+
+Desenvolva um layout de formulário complexo com campos de entrada, rótulos e botões usando Grid Layout. Experimente diferentes áreas para diferentes seções do formulário.
+
+## Exercício 4: Reorganizando Itens Dinamicamente
+
+Crie uma página com vários itens e use Grid Layout para reorganizá-los dinamicamente com base no tamanho da tela. Experimente alterar a ordem dos itens em dispositivos diferentes.

content/css-flexbox-grid/12.flex-box-ou-grid-layout/1.quando-usar-flexbox.md

@@ -0,0 +1,11 @@
+---
+title: Quando usar flexbox
+---
+
+O Flexbox é ideal para layouts unidimensionais, onde os elementos são organizados em uma única linha (ou uma única coluna). Aqui estão alguns casos comuns para usar Flexbox:
+
+- *Barra de navegação horizontal:* Flexbox é excelente para alinhar itens horizontalmente, útil para criar barras de navegação.
+
+- *Alinhamento de itens em uma única direção:* Se você estiver lidando com itens que precisam ser alinhados em uma única direção, como uma lista de itens ou botões, Flexbox é uma escolha eficaz.
+
+- *Distribuição de espaço disponível:* Flexbox facilita a distribuição do espaço disponível entre os itens, permitindo que eles cresçam ou encolham conforme necessário.

content/css-flexbox-grid/12.flex-box-ou-grid-layout/2.quando-usar-gridlayout.md

@@ -0,0 +1,11 @@
+---
+title: Quando usar Grid Layout
+---
+
+O Grid Layout é mais apropriado para layouts bidimensionais, onde você precisa organizar elementos em linhas e colunas. Aqui estão algumas situações em que o Grid Layout se destaca:
+
+- *Layouts complexos e multidimensionais:* Se você está criando layouts mais complexos que envolvem tanto colunas quanto linhas, como layouts de grade tradicionais, o Grid Layout oferece um controle mais granular.
+
+- *Posicionamento preciso:* O Grid Layout permite posicionar elementos em qualquer célula da grade, proporcionando um controle preciso sobre a disposição dos itens.
+
+- *Divisão de layout em regiões definidas:* Se você tem uma estrutura de layout claramente definida com cabeçalho, corpo e rodapé, o Grid Layout facilita a criação de regiões específicas para essas partes.

content/css-flexbox-grid/12.flex-box-ou-grid-layout/3.quando-usar-ambos.md

@@ -0,0 +1,17 @@
+---
+title: Quando usar ambos
+---
+
+Lembre-se de que Flexbox e Grid Layout não são mutuamente exclusivos; eles podem ser usados juntos para criar layouts mais complexos. Por exemplo:
+
+- *Flexbox dentro do Grid:* Use Flexbox para organizar itens dentro de uma célula do Grid. Isso é útil quando você deseja alinhar itens em uma única direção em uma parte específica do layout.
+
+- *Combinação para layouts híbridos:* Dependendo das necessidades específicas de diferentes partes de um layout, pode ser eficaz usar Flexbox em algumas áreas e Grid Layout em outras.
+
+## Resumo
+
+- Use Flexbox para layouts unidimensionais e alinhamento em uma única direção.
+
+- Use Grid Layout para layouts bidimensionais, posicionamento preciso e layouts mais complexos.
+
+- Considere a combinação de ambos para aproveitar as forças de cada modelo de layout, dependendo das necessidades específicas do seu projeto.

content/css-flexbox-grid/2.textos/1.Mudando-cor-dos-textos.md

@@ -0,0 +1,35 @@
+---
+title: Mudando as cores dos textos
+---
+
+## Mudando Cores de Texto
+
+Em CSS, você pode definir a cor do texto de várias maneiras. A propriedade color é usada para definir a cor do texto. Você pode usar nomes de cores, códigos hexadecimais, valores RGB, ou valores HSL. Aqui estão alguns exemplos:
+
+```css
+/* Usando nomes de cores */
+h1 {
+  color: red;
+}
+
+/* Usando códigos hexadecimais */
+p {
+  color: #336699;
+}
+
+/* Usando valores RGB */
+a {
+  color: rgb(255, 0, 0);
+}
+
+/* Usando valores HSL */
+span {
+  color: hsl(120, 100%, 50%);
+}
+```
+
+## Exercícios
+
+- Crie um novo arquivo HTML com três parágrafos. Aumente o tamanho de texto do primeiro parágrafo em relação aos outros usando a unidade px.
+- Crie um elemento de lista não ordenada (`<ul>`) e defina o tamanho de texto dos itens da lista em em.
+- Crie um link (`<a>`) e aumente seu tamanho de texto em porcentagem.

content/css-flexbox-grid/2.textos/2.Mudando-tamanho-dos-textos.md

@@ -0,0 +1,31 @@
+---
+title: Mudando o tamanho dos textos
+---
+
+## Mudando Tamanhos de Texto
+
+Você pode controlar o tamanho do texto usando a propriedade font-size. Você pode especificar tamanhos em unidades como px (pixels), em (relativo ao tamanho do elemento pai), rem (relativo ao tamanho da raiz), % (percentagem) e outros. Aqui estão exemplos:
+
+```css
+/* Usando pixels */
+h2 {
+  font-size: 24px;
+}
+
+/* Usando em */
+p {
+  font-size: 1.2em;
+}
+
+/* Usando porcentagem */
+a {
+  font-size: 120%;
+}
+
+```
+
+## Exercícios
+
+- Crie uma página HTML com três parágrafos e atribua a cada parágrafo uma cor de texto diferente.
+- Crie um cabeçalho (por exemplo,  `<h1>`) e altere sua cor para um código hexadecimal à sua escolha.
+- Faça um link (`<a>`) e defina sua cor de texto usando valores RGB.