https://github.com/monicaquintal/estudando-flexbox-alurinha
Desenvolvimento do Alurinha, um gerenciador de cursos online - Curso Flexbox: posicione elementos na tela (Alura).
https://github.com/monicaquintal/estudando-flexbox-alurinha
css html
Last synced: 3 months ago
JSON representation
Desenvolvimento do Alurinha, um gerenciador de cursos online - Curso Flexbox: posicione elementos na tela (Alura).
- Host: GitHub
- URL: https://github.com/monicaquintal/estudando-flexbox-alurinha
- Owner: monicaquintal
- Created: 2023-02-10T01:44:04.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-02-14T02:25:19.000Z (over 2 years ago)
- Last Synced: 2025-01-06T08:21:53.643Z (5 months ago)
- Topics: css, html
- Language: CSS
- Homepage: https://monicaquintal.github.io/estudando-flexbox-alurinha/
- Size: 493 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
Alurinha
Curso: Flexbox - Posicione elementos na tela (Alura)
ONE | Fase 3 - Especialização Front-End
Tecnologias |
Projeto |
Layout |
Aulas
## 🚀 Tecnologias
Projeto desenvolvido com as seguintes tecnologias:
- HTML
- CSS
## 💻 Projeto
A proposta do curso é o desenvolvimento do Alurinha, um gerenciador de cursos online, sobretudo manuseando o flexbox, que é uma especificação CSS.
## 🔖 Layout
## 📚 Aulas
### Aula 01: Preparando o ambiente
### Aula 02: Ajustando o cabeçalho
- criando e importanto o arquivo flexbox.css:
~~~html
~~~
- ajustes de display flex.
~~~css
.pai {
display: flex;
}
~~~
- disponibilizado site [Can I Use](https://caniuse.com/) para verificar em quais sistemas/navegadores a propriedade Flexbox funciona, já que é uma propriedade razoavelmente atual.
- importante:
- display: inline
- permite que os elementos se posicionem um do lado do outro.
- o problema é que os elementos não aceitam mais que seja modificada tanto a width quanto a height, o que limita MUITO as possibilidades.
- display: inline-block
- permite que os elementos se posicionem um do lado do outro.
- permite que os elementos tenham sua width e height modificadas!
- é muito mais interessante na maioria dos casos do que o display: inline.
- o problema de usar display: inline-block é espaçar os elementos entre si. Para fazer isso teríamos que colocar margins e fazer contas.
- float: left | right
- é mais complicado, empurra o elemento para um dos lados (left | right) e os elementos que estão embaixo sobem.
- não permite que usemos a propriedade vertical-align: middle para alinhar os elementos verticalmente.
- para contornar a falta do vertical-align, uma possibilidade seria colocar margin-top ou bottom nos elementos e usar os números mágicos!
- display: flex
- permite os elementos ficarem um do lado do outro, permite espaçar os elementos de forma mais intuitiva e sem ter que fazer cálculos. Além disso ele também permite alinhar os elementos verticalmente de forma fácil.
- pode ser um pouco mais complicado de usar tendo em vista que existem diversas propriedades que vem junto da especificação flexible box, todavia tudo isso foi feito para justamente melhorar nosso código.
### Aula 03: Arrumando o footer
- alinhando o ul (itens) e o form (formulário)!
- ajustando o course map.
### Aula 04: Grid principal e limitações do Flexbox
- organizando o Mapa de Cursos;
- aplicação de nth-child() para definição da última linha.
### Aula 05: Ajustando para mobile
Para saber quais propriedades são aplicadas ao container e aos flex items, [acessar a documentação](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)!
Temos:
- container:
~~~
display: flex
flex-direction
justify-content
flex-wrap
flex-flow
align-items
align-content
~~~
- flex item:
~~~
order
flex-grow
flex-shrink
flex-basis
flex
align-self
~~~