.png)
Projeto Do Curso de CSS: dispondo elementos com Flexbox e Grid
Esse é um repositório que tem o intuito de evidenciar o projeto que foi feito durante o Curso de CSS: dispondo elementos com Flexbox e Grid, da empresa Alura feito pelo instrutor Matheus Alberto.
⚙ Sobre o Projeto:
Esse projeto tem como objetivo criar uma página da HZC, que é uma espécie de comunidade de skatistas do Rio de Janeiro, caso queira conhecer mais sobre eles, deixo suas redes abaixo:Em geral o curso é focado na linguagem CSS, pois o foco do curso é ensinar Flexbox e Grid por meio do posicionamento das imagens e vídeos que devem estar presentes na página.
Além disso, o diferencial nesse curso é que ele é projetado desde o início de forma responsiva, com o pensamento que atualmente a maioria de acessos que temos em nossos sites vem por parte de dispositivos móveis.
📝 Como O Processo Ocoreu:
Inicialmente o projeto foi desenvolvido usando a ferramenta de desenvolvedor do navegador chrome com um limite de pixels bem baixo, caso você não conheça essa ferramenta deixo abaixo um material que fala sobre ela:
Após o site ser desenvolvido em versão mobile o instrutor começou à usar as media queries para fazer o design responsivo de forma que o site se adaptasse para computadores (sinceramente eu achei isso uma novidade, visto que na maioria das vezes é feito o contrário, primeiro construímos a versão desktop e depois a mobile, mas dessa vez foi o contrário, uma experiência bem legal até).
Contudo o projeto possui mais de uma página, e essas páginas extras estão todas disponíveis no figma, contudo elas não são ensinadas no curso, o processo de construção delas não é feito no curso.
Com o intuito de incentivar os alunos a praticar os projetos, o professor dá a dica dizendo que para construir as outras páginas será necessário somente copiar a estrutura das páginas que fizemos já e adaptar elas de acordo com o figma.
Em geral as outras páginas são opcionais, eu tentei fazer todas que estavam montadas no figma, e no meio do caminho encontrei vários desafios, mas foi muito bom para praticar e colocar em prática o que eu aprendi!
E no fim ainda consegui praticar um pouco do uso dos comandos git para exportar o projeto para cá, e pra falar a verdade essa área eu ainda tenho um pouco de dificuldade, e durante esse processo todo de exportação dos arquivos para o GitHub, confesso que tive alguns problemas com para exportar os arquivos, mas no fim consegui, e o resultado é esse.
E claro tudo isso foi feito usando o apoio de usando o apoio de um Figma criado especialmente para o curso, link abaixo:
📥 Conhecimentos Gerais Adquiridos:
Durante o desenvolvimento aprendi e consegui replicar os seguintes tópicos:
- Flexbox e suas propriedades para o posicionamento de elementos;
- Como produzir um cabeçalho utilizando as ferramentas do flexbox;
- As limitações do flexbox;
- Diferença entre o flexbox e o grid;
- Flex container;
- A propriedade display: Flex;
- Justify-content e align-itens;
- O flex-wrap e flex-direction;
- A propriedade gap e seus “parentes”;
- Como organizar elementos com grid-row e grid-column;
- O Grid area.
Gif de Execução Do Projeto:
🛠 Tecnologias Usadas:
Para construir o projeto proposto no curso, como suporte foram usadas as seguintes tecnologias:
📑 Acesso ao Projeto:
👨💻 Desenvolvido, Projetado e Adaptado Por:
 Renan Cezar Wuicik |
|---|