https://github.com/danielbarret0/wavecast
Esse projeto tem como objetivo aprender e praticar conceitos de Grid com CSS.
https://github.com/danielbarret0/wavecast
aprendinaalura bohr-deployed css css-grid html vitrinedev
Last synced: 3 months ago
JSON representation
Esse projeto tem como objetivo aprender e praticar conceitos de Grid com CSS.
- Host: GitHub
- URL: https://github.com/danielbarret0/wavecast
- Owner: DanielBarret0
- Created: 2023-10-25T18:37:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-25T19:18:57.000Z (over 1 year ago)
- Last Synced: 2023-10-26T19:37:06.275Z (over 1 year ago)
- Topics: aprendinaalura, bohr-deployed, css, css-grid, html, vitrinedev
- Language: HTML
- Homepage: https://wavecast.bohr.io
- Size: 37.5 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Wave Cast
Esse projeto tem como objetivo aprender e praticar conceitos de Grid com CSS.
| :placard: Vitrine.Dev | [Minha Vitrine Dev](https://cursos.alura.com.br/vitrinedev/danielbarreto) |
| ------------- | --- |
| :sparkles: Nome | **Wave Cast**
| :label: Tecnologias | 
| :rocket: URL | [WaveCast](https://wavecast.bohr.io)
| :fire: Curso Alura | [CSS: construindo layouts com Grid](https://cursos.alura.com.br/course/css-construindo-layouts-com-grid)
## Detalhes do projeto
Com esse curso aprendi:
- Identifico as principais características de um layout baseado em grid.
- Implemento valores para as alturas das linhas e larguras das colunas.
- Modifico o alinhamento vertical e horizontal dos elementos.
- Calculo o espaçamento vertical e horizontal entre os elementos.
- Integro as propriedades do grid para tornar o layout responsivo.
- Construo páginas complexas da web com grid container e grid item.
- Crio elementos como cards, menus e barra de rolagem com grid.
Curso ministrado pelo professor [Luan Alves](https://www.linkedin.com/in/luanalvesdev/) na escola Alura.
## :hushed: Afinal o que é Grid?
Imagine que você está brincando com um monte de blocos coloridos em uma mesa. Você quer organizar esses blocos de uma maneira legal para fazer desenhos ou padrões. O CSS Grid é como uma grade mágica que ajuda você a organizar esses blocos na tela do seu computador.
Essa grade é como um monte de quadrados invisíveis onde você pode colocar seus blocos. Você pode dizer para a grade quantas linhas e colunas ela deve ter, como se você estivesse desenhando um tabuleiro para um jogo.
Depois, você coloca seus blocos nos quadrados da grade. Isso ajuda a manter tudo organizado e alinhado. Você pode dizer para os blocos quão grandes eles devem ser e onde devem ficar na grade.
O CSS Grid torna mais fácil para você criar páginas da web bonitas, como se estivesse brincando com blocos, mas no computador. É como uma ferramenta de design mágica que ajuda a arrumar as coisas do jeito que você gosta na tela do seu computador.
## :anger: Tags mais usadas do CSS Grid
| Tag | Descrição |
|--------------------------------- |------------------------------------------------------------------------------------------- |
| grid-container ou display: grid | Define um elemento como um contêiner de grade. |
| grid-template-rows | Define o número e o tamanho das linhas na grade. |
| grid-template-columns | Define o número e o tamanho das colunas na grade. |
| grid-row e grid-column | Define em qual linha e coluna um item da grade deve ser colocado. |
| grid-gap ou gap | Define o espaço entre as linhas e colunas da grade. |
| grid-gap ou gap | Define o espaço entre as linhas e colunas da grade. |
| grid-template-areas | Permite criar layouts complexos atribuindo nomes a áreas na grade. |
| justify-content | Controla o alinhamento dos itens ao longo do eixo horizontal da grade. |
| align-content | Controla o alinhamento dos itens ao longo do eixo vertical da grade. |
| justify-items | Controla o alinhamento dos itens dentro das células da grade ao longo do eixo horizontal. |
| align-items | Controla o alinhamento dos itens dentro das células da grade ao longo do eixo vertical. |
## ⭐ Layout completo
# 🤯 Minha experiência
Amei fazer este curso, pois sempre hesitei em usar o Grid devido à minha falta de conhecimento em algumas de suas funções e conceitos. Agora, sinto-me mais confiante ao utilizar essa função.
# :books: Documentação
[Conceitos basico de CSS Grid](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout)
# :video_game: Jogos
[Grid Garden](https://cssgridgarden.com/#pt-br)
# 🖼️ Banner do VitrineDev
# 🙋♂️ Autor
[](https://github.com/DanielBarret0/codeChella/blob/main/LICENSE.md)