https://github.com/monicaquintal/nlw-spacetime
Projeto desenvolvido durante a NLW Spacetime - Trilha Explorer, evento promovido pela Rocketseat.
https://github.com/monicaquintal/nlw-spacetime
css git github html nlw rocketseat
Last synced: 3 months ago
JSON representation
Projeto desenvolvido durante a NLW Spacetime - Trilha Explorer, evento promovido pela Rocketseat.
- Host: GitHub
- URL: https://github.com/monicaquintal/nlw-spacetime
- Owner: monicaquintal
- Created: 2023-05-21T21:08:22.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-05-21T23:29:49.000Z (about 3 years ago)
- Last Synced: 2025-01-06T08:21:45.646Z (over 1 year ago)
- Topics: css, git, github, html, nlw, rocketseat
- Language: HTML
- Homepage: https://monicaquintal.github.io/nlw-spacetime/
- Size: 1000 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
NLW Spacetime
Trilha Explorer - Rocketseat
Sobre o projeto:
Layout do Projeto.
- Trata-se de um projeto Web Responsivo de uma cápsula do tempo para exibir memórias em uma linha do tempo.
- O foco da trilha é a programação Front-end Web (HTML e CSS), além de Git e GitHub.
- [Figma](https://www.figma.com/community/file/1240071097028170811/C%C3%A1psula-do-tempo-%E2%80%A2-Trilha-Explorer). 🚀
- [Notion](https://efficient-sloth-d85.notion.site/NLW-12-Spacetime-02e2ac5c92674f849638f9040a624652). 📚
Aulas:
Aula 01: Primeiros passos.
Aula 02: Descomplicando o código.
Aula 03: Estilizando o layout.
Aula 04: Profissionalizando o projeto.
Aula 05: O próximo nível.
---
Aula 01: Primeiros passos!
"É 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."
### 1. Conhecendo o [Figma do projeto](https://www.figma.com/community/file/1240071097028170811/C%C3%A1psula-do-tempo-%E2%80%A2-Trilha-Explorer).
### 2. Introdução ao Desenvolvimento Web
### 3. O que é uma IDE?
### 4. Preparando o ambiente.
### 5. Introdução ao HTML.
- [X] O que é HTML
- [X] Criando a estrutura de uma página HTML
- [X] Utilizando snippets para gerar a estrutura HTML
- [X] `htlm`
- [X] `Meta tags`
- [X] `Lang`
- [X] `Title`
- [X] `favicon`
- [X] `head`
- [X] `body`
### 6. Criando a memória da timelime.
- [X] Live server
- [X] Tags
- [X] `div`
- [X] `small`
- [X] `h1`
- [X] `img`
- [X] `p`
---
Aula 02: Descomplicando o código.
"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."
### 1. Introdução ao CSS
### 2. Estilizando a memória
- [X] Conectando o HTML com o CSS
- [X] Resetando a `margin` e `padding`
- [X] `box-sizing`
- [X] Estilizando o `body`
- [X] Adicionando fontes customizadas
- [X] Adicionando a tag `nav`
- [X] Conhecendo o Flexbox
- [X] Estilizando o `small`
- [X] Estilizando o `h1`
- [X] Estilizando a `img`
- [X] Estilizando o `p`
- [X] Convertendo para um link
- [X] Abrindo link
- [X] Duplicando as memórias
---
Aula 03: Estilizando o layout.
"Nesta aula, para continuar acelerando no HTML e CSS, vamos estilizar o layout do nosso projeto com uma técnica de Grid Layout."
### 1. Aplicando o Grid Layout
- [X] Aplicando `Grid` no `Body`
- [X] Aplicando o background no `aside`
### 2. Background e logo
- [X] Importando o Background e Logo
- [X] Adicionando a foto do usuário
- [X] Adicionando o nome do usuário
- [X] Adicionando a mensagem de feito com 💜
- [X] Estilizando as Tags
- [X] `img`
- [X] `h1`
- [X] `p`
- [X] `span`
---
Aula 04: Profissionalizando o projeto.
"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."
### 1. Utilizando selector WebKit (mecanismo de renderização utilizado nos navegadores) para customizando a scrollbar
### 2. Animações
- [X] Efeito de hover na imagem
- [X] Utilizando uma `div` no efeito da imagem
- [X] Aplicando efeito `hover` na imagem
- [X] Deixando a transição suave
- [X] Keyframes
- [X] Criando animação de entrada com Keyframe
- [X] Aplicando animação em todos os elementos filhos de `aside`
- [X] Aplicando animação na nav
### 3. Layout Responsivo
- [X] Fontes responsivas
- [X] Utilizando regra de mídia (media query)
- [X] Reduzindo o tamanho da fonte
- [X] Modificando o Layout do Grid no `body`
- [x] Modificando o `aside`
- [X] Removendo o scroll somente da `nav`
---
Aula 05: O próximo nível.
"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."
### 1. O que é o Git
- [X] Iniciando o git (repositório) no projeto com: `git init`
- [X] Adicionando todos os arquivos modificados ao stage: `git add .`
- [X] Criando um ponto na história: `git commit -m “primeiro commit”`
### 2. O que é o GitHub
- [X] Criando um novo repositório no GitHub.
- [X] Adicionando origem do repositório remoto.
- [X] Enviando o projeto para o repositório remoto.
- [X] Criando um novo ponto na história.
- [X] Criando um README
- [X] Fazendo um novo commit pela interface do VSCode
- [X] Fazendo o push pela interface do VSCode
- [X] Visualizando o histórico das versões.
### 3. Publicando o site
- [X] Obtendo o link do site: https://`seu_suario`.github.io/`nome_repositorio`
- [X] Adicionando uma descrição no repositório
- [X] Adicionando o link do site no repositório
- [X] Adicionando tópicos
### 4. Como atualizar o projeto