https://github.com/monicaquintal/nlw-copa
Desenvolvimento de projeto de Calendário de Jogos da Copa - NLW Copa (Rocketseat).
https://github.com/monicaquintal/nlw-copa
css git github html javascript nlw rocketseat
Last synced: 3 months ago
JSON representation
Desenvolvimento de projeto de Calendário de Jogos da Copa - NLW Copa (Rocketseat).
- Host: GitHub
- URL: https://github.com/monicaquintal/nlw-copa
- Owner: monicaquintal
- Created: 2022-11-01T00:40:48.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-05T01:02:15.000Z (over 2 years ago)
- Last Synced: 2025-01-06T08:21:29.421Z (5 months ago)
- Topics: css, git, github, html, javascript, nlw, rocketseat
- Language: CSS
- Homepage: https://monicaquintal.github.io/NLW-copa/
- Size: 213 KB
- Stars: 0
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
NLW Copa
Trilha Explorer.
Construindo bases + HTML |
Explorando CSS |
Introdução ao JavaScrip |
Personalizando |
Últimos ajustes
## Tecnologias:
O projeto foi desenvolvido com as seguintes tecnologias:
- HTML e CSS
- JavaScript
- Git e GitHub
## Projeto:
O Calendário da Copa é um projeto que mostra os jogos da Copa de 2022.
## Aula 01: Construindo as bases
"Nossos primeiros passos! Nesta aula vamos conhecer as bases necessárias para dar os primeiros passos na prática em programação e dar início à estruturação de pastas e HTML do nosso projeto."
### A) Boas vindas!
### B) O Projeto:
- Será desenvolvido um Calendário de Jogos;
- disponibilizados links do Calendário do Google com os jogos, bem como do Figma.
### C) Preparando o ambiente:
- utilizado VS Code;
- instalação de extensões (Live Server, Material Icon Theme, Omni Theme, Prettier);
### D) Introdução ao HTML:
- criado arquivo index.html, e iniciada sua estruturação básica.
- inserida imagem de logo a partir do Figma (Copy/Paste as... Copy as SVG -> criar um arquivo .svg e colar o código).
## Aula 02: Explorando o CSS
"Chegou a hora de começar a estilizar nosso projeto! Vamos explorar o CSS (Cascading Style Sheets), implementar o estilo no nosso projeto e entender como funciona o Box Model."
### A) Introdução ao CSS:
- "cascata" = quando há 2 (ou mais) declarações, a última será mais relevante.
- especificidade = cada seletor tem um peso:
- id caracteriza um elemento único;
- peso: id > classe > elemento.
- todos os elementos html serão considerados uma caixa (conteúdo, largura, altura, preenchimento, margem, bordas, espaçamento).
### B) Retomando o projeto:
- Configurando o VS Code:
- criação da pasta .vscode;
- criação do arquivo settings.json.
- Criando e configurando o arquivo style.css.
- aplicação de fonte obtida no Google Fonts.
## Aula 03: Introdução ao JavaScript
"Nessa aula vamos perder o medo de palavras como Algoritmo, Lógica de programação e Funções. Um spoiler, não tem nada de matemática aqui! Nós vamos descomplicar a programação e perder o medo de Javascript, entendendo o poder que ele dá para nossos projetos."
### A) Fundamentos da Programação (descomplicando conceitos):
- programação = ensinar ao computador;
- algoritmo = sequência de passos, conjunto de regras;
- lógica de programação = maneira de pensar;
- sintaxe = maneira correta de escrever.
### B) Introdução ao Javascript:
- é uma linguagem de programação, interpretada e executada pelos navegadores;
- é a inteligência da tríade:
- HTML é a estrutura;
- CSS é a beleza;
- JS é a inteligência.
- por que aprender JS?
- apps para web, desktop (Elektron), mobile (React Native);
- empresas famosas (Instagram, Google, Netflix, TikTok,...);
- moderna e viva (comunidade e linguagem em crescimento).
- instruções e sintaxe:
- instruções: ordens ao computador;
- sintaxe: maneira correta de escrever.
- lembrar que há algumas palavras reservadas da linguagem.
- executando JS:
- diretamente no navegador, com ferramenta DevTools (apertando F12 no teclado);
- plataformas online (como fronteditor.dev e codepen.io);
- projeto local (arquivos no pc):
- diretamente no arquivo .html: <script>alert('Olá')</script>.
- importa um arquivo .js no seu .html: <script src="./script.js"></script>.
### C) Variáveis e tipos de dados:
- variáveis são caixinhas em que guardamos tipos de dados que serão utilizados mais tarde;
- palavra reservada "let" é usada para declarar a variável.
- palavra reservada "const" é usadapara declarar constantes (não pode alterar o valor).
- tipos de dados: textos, numéricos, booleanos (lógicos = V ou F) ou dados mais estruturados.
### D) Funções:
- permite agrupamento e reuso de código;
- é um mini programa dentro do programa maior;
- toda linguagem oferece muitas opções.
### E) Objetos:
- tudo é objeto!
- objetos possuem atributos (propriedades) e métodos (funcionalidades).
### F) Retomando o projeto:
- criação do arquivo main.js.
- quando utilizamos ``, é possível fazer quebra de linha na string declarada no JS.
## Aula 04: Personalizando o projeto
Vamos deixar nossa marca no projeto! Existem diversas maneiras de customizar e personalizar um projeto, nesta aula vamos usar animações, CSS variables e refactor.
### A) Refactor:
- Mudar o código, sem mudar o comportamento final;
- Mais clareza e melhorias para o código.
### B) Animações e transições:
- Transition - no CSS;
- @keyframes (animações, act rule) - no CSS;
- Dynamic with JS - no arquivo main.js.
### C) Desktop Mode:
- @media.
### D) Custom colors:
- CSS variables (3 opções: null/vazio, green ou blue).
## Aula 05: Colocando o projeto no mundo + próximos passos.
Últimos ajustes! Chegou a hora de finalizar nosso projeto e colocá-lo no mundo. Vamos aprender como criar um Readme e publicar nosso código no GitHub.
### A) Git:
- controle de versão;
- é uma linha do tempo (histórico do projeto).
- conceitos básicos:
- Repository: local onde ficará o histórico do projeto;
- Branch: linha do tempo;
- Commit: pontos na história;
- Stage: preparação do que será enviado para o ponto na história.
- comandos principais:
- git init = inicia o git (repositório) no projeto;
- git add . = adiciona todos os arquivos modificados ao stage;
- git commit -m "message here" = cria e descreve um ponto na história;
- git push = envia as alterações para o repositório remoto.
### B) GitHub:
- plataforma online para colocar seus códigos (através do git);
- permite trabalhar em diversos projetos (colaborar em projetos, trabalhar com times e etc);
- perfil para mostrar seu trabalho (portfólio).