{"id":19330759,"url":"https://github.com/monicaquintal/nlw-spacetime","last_synced_at":"2026-04-11T11:41:40.015Z","repository":{"id":168042719,"uuid":"643658007","full_name":"monicaquintal/nlw-spacetime","owner":"monicaquintal","description":"Projeto desenvolvido durante a NLW Spacetime - Trilha Explorer, evento promovido pela Rocketseat.","archived":false,"fork":false,"pushed_at":"2023-05-21T23:29:49.000Z","size":1025,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-06T08:21:45.646Z","etag":null,"topics":["css","git","github","html","nlw","rocketseat"],"latest_commit_sha":null,"homepage":"https://monicaquintal.github.io/nlw-spacetime/","language":"HTML","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":"2023-05-21T21:08:22.000Z","updated_at":"2023-05-21T23:27:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"43473cca-f63a-40f2-98a6-e98726ed4b6d","html_url":"https://github.com/monicaquintal/nlw-spacetime","commit_stats":null,"previous_names":["monicaquintal/nlw-spacetime"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monicaquintal%2Fnlw-spacetime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monicaquintal%2Fnlw-spacetime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monicaquintal%2Fnlw-spacetime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/monicaquintal%2Fnlw-spacetime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/monicaquintal","download_url":"https://codeload.github.com/monicaquintal/nlw-spacetime/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240434304,"owners_count":19800550,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","nlw","rocketseat"],"created_at":"2024-11-10T02:37:49.617Z","updated_at":"2026-04-11T11:41:34.964Z","avatar_url":"https://github.com/monicaquintal.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg align=\"right\" src=\"https://static.vecteezy.com/system/resources/previews/012/375/446/original/rocket-launch-start-up-symbol-png.png\" width=\"120px\"/\u003e\n\u003ch1\u003eNLW Spacetime\u003c/h1\u003e\n\u003ch3\u003eTrilha Explorer - Rocketseat\u003c/h3\u003e\n\u003c/div\u003e\n\n\u003ch2\u003eSobre o projeto:\u003c/h2\u003e\n\n\u003cbr\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/projeto.png\"\u003e\u003cbr\u003e\n  \u003cem\u003eLayout do Projeto.\u003c/em\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n- Trata-se de um projeto Web Responsivo de uma cápsula do tempo para exibir memórias em uma linha do tempo.\n- O foco da trilha é a programação Front-end Web (HTML e CSS), além de Git e GitHub.\n- [Figma](https://www.figma.com/community/file/1240071097028170811/C%C3%A1psula-do-tempo-%E2%80%A2-Trilha-Explorer). 🚀\n- [Notion](https://efficient-sloth-d85.notion.site/NLW-12-Spacetime-02e2ac5c92674f849638f9040a624652). 📚\n\n\u003ch2\u003eAulas:\u003c/h2\u003e\n\n\u003ca href=\"#aula01\"\u003eAula 01: Primeiros passos.\u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"#aula02\"\u003eAula 02: Descomplicando o código.\u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"#aula03\"\u003eAula 03: Estilizando o layout.\u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"#aula04\"\u003eAula 04: Profissionalizando o projeto.\u003c/a\u003e\u003cbr\u003e\n\u003ca href=\"#aula05\"\u003eAula 05: O próximo nível.\u003c/a\u003e\u003cbr\u003e\n\n---\n\n\u003cdiv id=\"aula01\" align=\"center\"\u003e\n\u003ch2\u003eAula 01: Primeiros passos!\u003c/h2\u003e\n\u003c/div\u003e\n\n\u003cem\u003e\n\"É hora de decolar e partir rumo ao próximo nível. Esse é o começo da nossa missão onde você vai preparar o setup, conhecer o projeto e entender os fundamentos para dar os primeiros passos no desenvolvimento Web.\"\n\u003c/em\u003e\n\n### 1. Conhecendo o [Figma do projeto](https://www.figma.com/community/file/1240071097028170811/C%C3%A1psula-do-tempo-%E2%80%A2-Trilha-Explorer).\n\n### 2. Introdução ao Desenvolvimento Web\n\n### 3. O que é uma IDE?\n\n### 4. Preparando o ambiente.\n\n### 5. Introdução ao HTML.\n\n- [X] O que é HTML\n- [X] Criando a estrutura de uma página HTML\n- [X] Utilizando snippets para gerar a estrutura HTML\n- [X] `htlm`\n- [X] `Meta tags`\n- [X] `Lang`\n- [X] `Title`\n- [X] `favicon`\n- [X] `head`\n- [X] `body`\n\n### 6. Criando a memória da timelime.\n\n- [X] Live server\n- [X] Tags\n    - [X] `div`\n    - [X] `small`\n    - [X] `h1`\n    - [X] `img`\n    - [X] `p`\n\n--- \n\n\u003cdiv id=\"aula02\" align=\"center\"\u003e\n\u003ch2\u003eAula 02: Descomplicando o código.\u003c/h2\u003e\n\u003c/div\u003e\n\n\u003cem\u003e\n\"Nesta aula nós vamos avançar ainda mais no HTML e utilizar o CSS para deixar o visual da nossa aplicação incrível.\"\n\u003c/em\u003e\n\n### 1. Introdução ao CSS\n\n### 2. Estilizando a memória\n\n- [X] Conectando o HTML com o CSS\n- [X] Resetando a `margin` e `padding`\n- [X] `box-sizing`\n- [X] Estilizando o `body`\n- [X] Adicionando fontes customizadas\n- [X] Adicionando a tag `nav`\n- [X] Conhecendo o Flexbox\n- [X] Estilizando o `small`\n- [X] Estilizando o `h1`\n- [X] Estilizando a `img`\n- [X] Estilizando o `p`\n- [X] Convertendo para um link\n    - [X] Abrindo link\n- [X] Duplicando as memórias\n\n--- \n\n\u003cdiv id=\"aula03\" align=\"center\"\u003e\n\u003ch2\u003eAula 03: Estilizando o layout.\u003c/h2\u003e\n\u003c/div\u003e\n\n\u003cem\u003e\n\"Nesta aula, para continuar acelerando no HTML e CSS, vamos estilizar o layout do  nosso projeto com uma técnica de Grid Layout.\"\n\u003c/em\u003e\n\n### 1. Aplicando o Grid Layout\n- [X]  Aplicando `Grid` no `Body`\n- [X]  Aplicando o background no `aside`\n\n### 2. Background e logo \n- [X] Importando o Background e Logo\n- [X] Adicionando a foto do usuário\n- [X] Adicionando o nome do usuário\n- [X] Adicionando a mensagem de feito com 💜\n- [X] Estilizando as Tags\n    - [X] `img`\n    - [X] `h1`\n- [X] `p`\n- [X] `span`\n\n--- \n\n\u003cdiv id=\"aula04\" align=\"center\"\u003e\n\u003ch2\u003eAula 04: Profissionalizando o projeto.\u003c/h2\u003e\n\u003c/div\u003e\n\n\u003cem\u003e\n\"Nesta aula vamos profissionalizar o nosso código e deixar o nossa página ainda melhor. Para isso, vamos deixar o projeto responsivo, com adaptação aos tamanhos de tela, e preparar algumas animações.\"\n\u003c/em\u003e\n\n### 1. Utilizando selector WebKit (mecanismo de renderização utilizado nos navegadores) para customizando a scrollbar\n\n### 2. Animações\n\n- [X] Efeito de hover na imagem\n  - [X] Utilizando uma `div` no efeito da imagem\n  - [X] Aplicando efeito `hover` na imagem\n  - [X] Deixando a transição suave\n\n- [X] Keyframes\n  - [X] Criando animação de entrada com Keyframe\n  - [X] Aplicando animação em todos os elementos filhos de `aside`\n  - [X] Aplicando animação na nav\n  \n### 3. Layout Responsivo\n- [X] Fontes responsivas\n- [X] Utilizando regra de mídia (media query)\n- [X] Reduzindo o tamanho da fonte\n- [X] Modificando o Layout do Grid no `body`\n- [x] Modificando o `aside`\n- [X] Removendo o scroll somente da `nav`\n\n--- \n\n\u003cdiv id=\"aula05\" align=\"center\"\u003e\n\u003ch2\u003eAula 05: O próximo nível.\u003c/h2\u003e\n\u003c/div\u003e\n\n\u003cem\u003e\n\"Nesta última aula prática você vai aprender a fazer modificações no projeto e a compartilhar seu projeto na web para o mundo com Github, criando um link para acessar de qualquer lugar.\"\n\u003c/em\u003e\n\n### 1. O que é o Git\n\n- [X] Iniciando o git (repositório) no projeto com: `git init`\n- [X] Adicionando todos os arquivos modificados ao stage: `git add .`\n- [X] Criando um ponto na história: `git commit -m “primeiro commit”`\n\n### 2. O que é o GitHub\n\n- [X] Criando um novo repositório no GitHub.\n- [X] Adicionando origem do repositório remoto.\n- [X] Enviando o projeto para o repositório remoto.\n- [X] Criando um novo ponto na história.\n    - [X] Criando um README\n- [X] Fazendo um novo commit pela interface do VSCode\n- [X] Fazendo o push pela interface do VSCode\n- [X] Visualizando o histórico das versões.\n\n### 3. Publicando o site\n- [X] Obtendo o link do site: https://`seu_suario`.github.io/`nome_repositorio`\n- [X] Adicionando uma descrição no repositório\n- [X] Adicionando o link do site no repositório\n- [X] Adicionando tópicos\n\n### 4. Como atualizar o projeto","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonicaquintal%2Fnlw-spacetime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmonicaquintal%2Fnlw-spacetime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmonicaquintal%2Fnlw-spacetime/lists"}