{"id":19330746,"url":"https://github.com/monicaquintal/nlw-copa","last_synced_at":"2026-04-11T10:37:24.868Z","repository":{"id":153094014,"uuid":"560204116","full_name":"monicaquintal/NLW-copa","owner":"monicaquintal","description":"Desenvolvimento de projeto de Calendário de Jogos da Copa - NLW Copa (Rocketseat).","archived":false,"fork":false,"pushed_at":"2022-11-05T01:02:15.000Z","size":218,"stargazers_count":0,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-11T04:46:53.966Z","etag":null,"topics":["css","git","github","html","javascript","nlw","rocketseat"],"latest_commit_sha":null,"homepage":"https://monicaquintal.github.io/NLW-copa/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/monicaquintal.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-01T00:40:48.000Z","updated_at":"2024-10-31T18:04:22.000Z","dependencies_parsed_at":"2023-06-03T14:30:38.993Z","dependency_job_id":null,"html_url":"https://github.com/monicaquintal/NLW-copa","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/monicaquintal/NLW-copa","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monicaquintal%2FNLW-copa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monicaquintal%2FNLW-copa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monicaquintal%2FNLW-copa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monicaquintal%2FNLW-copa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/monicaquintal","download_url":"https://codeload.github.com/monicaquintal/NLW-copa/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monicaquintal%2FNLW-copa/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31677819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T08:18:19.405Z","status":"ssl_error","status_checked_at":"2026-04-11T08:17:08.892Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","git","github","html","javascript","nlw","rocketseat"],"created_at":"2024-11-10T02:37:47.780Z","updated_at":"2026-04-11T10:37:24.737Z","avatar_url":"https://github.com/monicaquintal.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eNLW Copa\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\nTrilha Explorer.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg alt=\"calendario da copa\" src=\"./capa/preview.jpg\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#aula01\"\u003eConstruindo bases + HTML\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#aula02\"\u003eExplorando CSS\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#aula03\"\u003eIntrodução ao JavaScrip\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#aula04\"\u003ePersonalizando\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;|\u0026nbsp;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#aula05\"\u003eÚltimos ajustes\u003c/a\u003e\n\u003c/p\u003e\n\n## Tecnologias:\n\nO projeto foi desenvolvido com as seguintes tecnologias:\n\n- HTML e CSS\n- JavaScript\n- Git e GitHub\n\n## Projeto:\n\nO Calendário da Copa é um projeto que mostra os jogos da Copa de 2022.\n\n\u003chr\u003e\n\n\u003cdiv id=\"aula01\"\u003e\n\n## Aula 01: Construindo as bases\n\n\u003cem\u003e\"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.\"\u003c/em\u003e\n\n### A) Boas vindas!\n\n### B) O Projeto:\n\n- Será desenvolvido um \u003cstrong\u003eCalendário de Jogos\u003c/strong\u003e;\n- disponibilizados links do \u003ca href=\"https://www.google.com/search?q=copa+do+mundo+calend%C3%A1rio+\u0026hl=en\u0026sxsrf=ALiCzsZoKWNkDcZB5r6yUZ_gOOckX6sfew%3A1666552817096\u0026ei=8ZNVY5S4BZHM1sQPhYyY8AI\u0026ved=0ahUKEwjU9KWFiff6AhURppUCHQUGBi4Q4dUDCA8\u0026uact=5\u0026oq=copa+do+mundo+calend%C3%A1rio+\u0026gs_lcp=Cgdnd3Mtd2l6EAMyBAgjECcyCAgAEIAEEMsBMggIABCABBDLATIICAAQgAQQywEyCAgAEIAEEMsBMggIABCABBDLATIGCAAQFhAeMgYIABAWEB4yBggAEBYQHjIGCAAQFhAeOgoIABBHENYEELADOg0IABDkAhDWBBCwAxgBSgQITRgBSgQIQRgASgQIRhgBUKgDWKgDYIkGaAFwAXgAgAGhAYgBoQGSAQMwLjGYAQCgAQHIAQ3AAQHaAQYIARABGAk\u0026sclient=gws-wiz#sie=lg;/m/0fp_8fm;2;/m/030q7;mt;fp;1;;;\"\u003eCalendário do Google com os jogos\u003c/a\u003e, bem como do \u003ca href=\"https://www.figma.com/file/eV90XQCnjnBjZX66TaJ8lY/Calend%C3%A1rio-de-Jogos-(Community)?node-id=0%3A1\"\u003eFigma\u003c/a\u003e.\n\n### C) Preparando o ambiente:\n\n- utilizado VS Code;\n- instalação de extensões (Live Server, Material Icon Theme, Omni Theme, Prettier);\n\n### D) Introdução ao HTML:\n\n- criado arquivo index.html, e iniciada sua estruturação básica.\n- inserida imagem de logo a partir do Figma (Copy/Paste as... Copy as SVG -\u003e criar um arquivo .svg e colar o código).\n\u003c/div\u003e\n\n\u003cdiv id=\"aula02\"\u003e\n\n## Aula 02: Explorando o CSS\n\n\u003cem\u003e\"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.\"\u003c/em\u003e\n\n### A) Introdução ao CSS:\n\n- \"cascata\" = quando há 2 (ou mais) declarações, a última será mais relevante.\n- especificidade = cada seletor tem um peso:\n\n  - id caracteriza um elemento único;\n  - peso: id \u003e classe \u003e elemento.\n\n- todos os elementos html serão considerados uma caixa (conteúdo, largura, altura, preenchimento, margem, bordas, espaçamento).\n\n### B) Retomando o projeto:\n\n- Configurando o VS Code:\n\n  - criação da pasta .vscode;\n  - criação do arquivo settings.json.\n\n- Criando e configurando o arquivo style.css.\n\n  - aplicação de fonte obtida no \u003ca href=\"https://fonts.google.com/\"\u003eGoogle Fonts\u003c/a\u003e.\n\u003c/div\u003e\n\n\u003cdiv id=\"aula03\"\u003e\n\n## Aula 03: Introdução ao JavaScript\n\n\u003cem\u003e\"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.\"\u003c/em\u003e\n\n### A) Fundamentos da Programação (descomplicando conceitos):\n\n- programação = ensinar ao computador;\n- algoritmo = sequência de passos, conjunto de regras;\n- lógica de programação = maneira de pensar;\n- sintaxe = maneira correta de escrever.\n\n### B) Introdução ao Javascript:\n\n- é uma linguagem de programação, interpretada e executada pelos navegadores;\n- é a inteligência da tríade:\n\n  - HTML é a estrutura;\n  - CSS é a beleza;\n  - JS é a inteligência.\n\n- por que aprender JS?\n\n  - apps para web, desktop (Elektron), mobile (React Native);\n  - empresas famosas (Instagram, Google, Netflix, TikTok,...);\n  - moderna e viva (comunidade e linguagem em crescimento).\n\n- instruções e sintaxe:\n\n  - instruções: ordens ao computador;\n  - sintaxe: maneira correta de escrever.\n  - lembrar que há algumas palavras reservadas da linguagem.\n\n- executando JS:\n\n  - diretamente no navegador, com ferramenta DevTools (apertando F12 no teclado);\n  - plataformas online (como fronteditor.dev e codepen.io);\n  - projeto local (arquivos no pc):\n    - diretamente no arquivo .html: \u0026lt;script\u0026gt;alert('Olá')\u0026lt;/script\u0026gt;.\n    - importa um arquivo .js no seu .html: \u0026lt;script src=\"./script.js\"\u0026gt;\u0026lt;/script\u0026gt;.\n\n### C) Variáveis e tipos de dados:\n\n- variáveis são caixinhas em que guardamos tipos de dados que serão utilizados mais tarde;\n  - palavra reservada \u003cstrong\u003e\"let\"\u003c/strong\u003e é usada para declarar a variável.\n  - palavra reservada \u003cstrong\u003e\"const\"\u003c/strong\u003e é usadapara declarar constantes (não pode alterar o valor).\n- tipos de dados: textos, numéricos, booleanos (lógicos = V ou F) ou dados mais estruturados.\n\n### D) Funções:\n\n- permite agrupamento e reuso de código;\n- é um mini programa dentro do programa maior;\n- toda linguagem oferece muitas opções.\n\n### E) Objetos:\n\n- tudo é objeto!\n- objetos possuem atributos (propriedades) e métodos (funcionalidades).\n\n### F) Retomando o projeto:\n\n- criação do arquivo main.js.\n- quando utilizamos ``, é possível fazer quebra de linha na string declarada no JS.\n\u003c/div\u003e\n\n\u003cdiv id=\"aula04\"\u003e\n\n## Aula 04: Personalizando o projeto\n\n\u003cem\u003eVamos deixar nossa marca no projeto! Existem diversas maneiras de customizar e personalizar um projeto, nesta aula vamos usar animações, CSS variables e refactor.\u003c/em\u003e\n\n### A) Refactor:\n\n- Mudar o código, sem mudar o comportamento final;\n- Mais clareza e melhorias para o código.\n\n### B) Animações e transições:\n\n- Transition - no CSS;\n- @keyframes (animações, act rule) - no CSS;\n- Dynamic with JS - no arquivo main.js.\n\n### C) Desktop Mode:\n\n- @media.\n\n### D) Custom colors:\n\n- CSS variables (3 opções: null/vazio, green ou blue).\n\u003c/div\u003e\n\n\u003cdiv id=\"aula05\"\u003e\n\n## Aula 05: Colocando o projeto no mundo + próximos passos.\n\n\u003cem\u003eÚ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.\u003c/em\u003e\n\n### A) Git:\n\n- controle de versão;\n- é uma linha do tempo (histórico do projeto).\n- conceitos básicos:\n\n  - Repository: local onde ficará o histórico do projeto;\n  - Branch: linha do tempo;\n  - Commit: pontos na história;\n  - Stage: preparação do que será enviado para o ponto na história.\n\n- comandos principais:\n\n  - git init = inicia o git (repositório) no projeto;\n  - git add . = adiciona todos os arquivos modificados ao stage;\n  - git commit -m \"message here\" = cria e descreve um ponto na história;\n  - git push = envia as alterações para o repositório remoto.\n\n ### B) GitHub:\n\n - plataforma online para colocar seus códigos (através do git);\n - permite trabalhar em diversos projetos (colaborar em projetos, trabalhar com times e etc);\n - perfil para mostrar seu trabalho (portfólio).\n\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonicaquintal%2Fnlw-copa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonicaquintal%2Fnlw-copa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonicaquintal%2Fnlw-copa/lists"}