####################################################################################################
01. Navegador e editor de codigo: 
   Nessa primeira aula instalamos os programas necessários para começar a programar.

# Links

### Navegadores

[Baixe o Navegador da Web do Microsoft Edge | Microsoft](https://www.microsoft.com/pt-br/edge)

[Navegador da Web Google Chrome](https://www.google.com/intl/pt-BR/chrome/)

### Opcional

[Momentum Dash](https://momentumdash.com/)

### Editor de código

[Visual Studio Code - Code Editing. Redefined](https://code.visualstudio.com/)

####################################################################################################
02. Introducao ao HTML: 
   Nessa aula demos introdução ao HTML (Hyper Text Markup Language), aprendemos sobre a estrutura inicial do HTML e suas tags.

# Código

- HTML
[index.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/introducao-ao-html.html)

# Código zipado

- [HTML.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/introducao-ao-html.zip)

# Material complementar

- [Glossário HTML: Principais elementos HTML](https://efficient-sloth-d85.notion.site/Principais-elementos-HTML-da8b750fee5b49f2923fdc35b1c921fc)

####################################################################################################
04. Introducao ao CSS: 
   Nessa aula demos introdução ao CSS (Cascading Style Sheets), o CSS é tudo que vai dar estilos ao nosso site. Vimos sobre propriedades, seletores e suas especificidades.

# Código

- CSS

- [css.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/introducao-ao-css.html)

# Código zipado

[CSS.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/introducao-ao-css.zip)

####################################################################################################
05. O que iremos desenvolver e o que e o Figma: 
   Nessa aula apresentamos a ferramenta Figma e o projeto que iremos desenvolver durante o Stage 02.

# Links

[ARQUIVO DO PROJETO NO FIGMA: Explorer - Projeto 01](https://www.figma.com/file/fAvYZz4dPV5MfhL77XkqkD/Explorer---Projeto-01/duplicate)
[Guia "Instalando e configurando o Figma"](https://efficient-sloth-d85.notion.site/Instalando-e-configurando-o-Figma-df1b0905710d4f21b55cb3c323631574)

####################################################################################################
07. Iniciando o projeto 01: 
   Nessa aula codificamos a estrutura inicial do nosso projeto, passando por todos os elementos do HTML *(head, meta, body)*.

# Link do Projeto

[ARQUIVO DO PROJETO NO FIGMA: Explorer - Projeto 01](https://www.figma.com/file/fAvYZz4dPV5MfhL77XkqkD/Explorer---Projeto-01/duplicate)

# Código

- Projeto01
    
    [index.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/iniciando-o-projeto-01.html)
    

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/iniciando-o-projeto-01.zip)

####################################################################################################
08. Estruturando o projeto 01: 
   Nessa aula começamos a exportar as imagens do Figma e estruturar o nosso projeto. 

Aprendemos as sobre os elementos `<div>`, `<img>`, `<h1>` , `<a>` e `<p>`. 

Além de novas propriedades como `src`, `href` e `id` .

# Código

- Projeto01

- [index.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/estruturando-o-projeto.html)
- images
[balls.svg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/balls.svg)
[img1.jpg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/img1.jpeg)

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/estruturando-o-projeto.zip)

####################################################################################################
09. Apresentacao e posicao dos elementos na tela: 
   Nessa aula organizamos a posição dos nossos elementos respeitando a ordem do HTML e aprendemos sobre `block` e `inline` e acrescentamos mais dois novos elementos `<span>` e `<strong>`        

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/apresentacao-e-posicao-dos-elementos-na-tela.zip)

####################################################################################################
10. Aplicando fontes customizadas e iniciando o CSS: 
   Nessa aula aplicamos fontes customizadas e demos inicio a estilização do nosso projeto 01. 

### Links:

[Open Sans - Google Fonts](https://fonts.google.com/specimen/Open+Sans?query=open+sans)

[Inter - Google Fonts](https://fonts.google.com/specimen/Inter?query=inter)

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/aplicando-fontes-customizadas.zip)

####################################################################################################
11. Trabalhando com cores e fontes: 
   Nessa aula começamos a dar cores ao textos do nosso projeto de acordo com o layout do Figma. Também aprendemos algumas propriedades do CSS: `color`, `font-size`, `line-height`, `font-weight`

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/trabalhando-com-cores.zip)

####################################################################################################
12. Alinhando textos e elementos: 
   Nessa aula começamos organizando nosso código CSS e depois alinhamos os textos e elementos da página utilizando as propriedades do CSS: `text-align`

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/alinhando-textos-e-elementos.zip)

####################################################################################################
13. Mais ajustes de textos: 
   Nessa aula fizemos alguns ajustes nos textos do nosso projeto e aprendemos como quebrar linhas e uma maneira de utilizar espaços.

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/mais-ajustes-de-textos.zip)

####################################################################################################
14. Trabalhando com espacamentos: 
   Nessa aula aprendemos sobre as propriedades `margin` do CSS, aplicamos o *shorthand* em um trecho de código e ajustamos os espaçamentos do nosso projeto.


# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/trabalhando-com-espacamentos.zip)

####################################################################################################
15. Bordas e classificacoes de elementos: 
   Nessa aula aprendemos como adicionar uma linha em nossa página com a propriedade `border` do CSS

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/bordas-e-classificacoes.zip)

####################################################################################################
16. Posicionando elementos: 
   Nessa aula nós aprendemos sobre posicionamento de elementos na página utilizando a propriedade `position` do CSS.

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/posicionando-elementos.zip)

####################################################################################################
17. Finalizando esta etapa: 
   Revisão de tudo que foi visto nesse módulo.

# Links

### Resultado final

[Móveis customizados](https://explorer-stage02-p01.vercel.app/)

####################################################################################################
18. Utilizando o codepen para enviar desafios: 
   Nessa aula o Mayk ensina como enviar o desafio para a plataforma utilizando a ferramenta Codepen e para hospedar as imagens podemos utilizar a plataforma imgur

## Links:

[CodePen](https://codepen.io/your-work)

[Imgur](https://imgur.com/)

####################################################################################################
01. Navegador e editor de codigo: 
   Nessa primeira aula instalamos os programas necessários para começar a programar.

# Links

### Navegadores

[Baixe o Navegador da Web do Microsoft Edge | Microsoft](https://www.microsoft.com/pt-br/edge)

[Navegador da Web Google Chrome](https://www.google.com/intl/pt-BR/chrome/)

### Opcional

[Momentum Dash](https://momentumdash.com/)

### Editor de código

[Visual Studio Code - Code Editing. Redefined](https://code.visualstudio.com/)

####################################################################################################
02. Introducao ao HTML: 
   Nessa aula demos introdução ao HTML (Hyper Text Markup Language), aprendemos sobre a estrutura inicial do HTML e suas tags.

# Código

- HTML
[index.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/introducao-ao-html.html)

# Código zipado

- [HTML.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/introducao-ao-html.zip)

# Material complementar

- [Glossário HTML: Principais elementos HTML](https://efficient-sloth-d85.notion.site/Principais-elementos-HTML-da8b750fee5b49f2923fdc35b1c921fc)

####################################################################################################
04. Introducao ao CSS: 
   Nessa aula demos introdução ao CSS (Cascading Style Sheets), o CSS é tudo que vai dar estilos ao nosso site. Vimos sobre propriedades, seletores e suas especificidades.

# Código

- CSS

- [css.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/introducao-ao-css.html)

# Código zipado

[CSS.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/introducao-ao-css.zip)

####################################################################################################
05. O que iremos desenvolver e o que e o Figma: 
   Nessa aula apresentamos a ferramenta Figma e o projeto que iremos desenvolver durante o Stage 02.

# Links

[ARQUIVO DO PROJETO NO FIGMA: Explorer - Projeto 01](https://www.figma.com/file/fAvYZz4dPV5MfhL77XkqkD/Explorer---Projeto-01/duplicate)
[Guia "Instalando e configurando o Figma"](https://efficient-sloth-d85.notion.site/Instalando-e-configurando-o-Figma-df1b0905710d4f21b55cb3c323631574)

####################################################################################################
07. Iniciando o projeto 01: 
   Nessa aula codificamos a estrutura inicial do nosso projeto, passando por todos os elementos do HTML *(head, meta, body)*.

# Link do Projeto

[ARQUIVO DO PROJETO NO FIGMA: Explorer - Projeto 01](https://www.figma.com/file/fAvYZz4dPV5MfhL77XkqkD/Explorer---Projeto-01/duplicate)

# Código

- Projeto01
    
    [index.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/iniciando-o-projeto-01.html)
    

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/iniciando-o-projeto-01.zip)

####################################################################################################
08. Estruturando o projeto 01: 
   Nessa aula começamos a exportar as imagens do Figma e estruturar o nosso projeto. 

Aprendemos as sobre os elementos `<div>`, `<img>`, `<h1>` , `<a>` e `<p>`. 

Além de novas propriedades como `src`, `href` e `id` .

# Código

- Projeto01

- [index.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/estruturando-o-projeto.html)
- images
[balls.svg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/balls.svg)
[img1.jpg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/img1.jpeg)

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/estruturando-o-projeto.zip)

####################################################################################################
09. Apresentacao e posicao dos elementos na tela: 
   Nessa aula organizamos a posição dos nossos elementos respeitando a ordem do HTML e aprendemos sobre `block` e `inline` e acrescentamos mais dois novos elementos `<span>` e `<strong>`        

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/apresentacao-e-posicao-dos-elementos-na-tela.zip)

####################################################################################################
10. Aplicando fontes customizadas e iniciando o CSS: 
   Nessa aula aplicamos fontes customizadas e demos inicio a estilização do nosso projeto 01. 

### Links:

[Open Sans - Google Fonts](https://fonts.google.com/specimen/Open+Sans?query=open+sans)

[Inter - Google Fonts](https://fonts.google.com/specimen/Inter?query=inter)

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/aplicando-fontes-customizadas.zip)

####################################################################################################
11. Trabalhando com cores e fontes: 
   Nessa aula começamos a dar cores ao textos do nosso projeto de acordo com o layout do Figma. Também aprendemos algumas propriedades do CSS: `color`, `font-size`, `line-height`, `font-weight`

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/trabalhando-com-cores.zip)

####################################################################################################
12. Alinhando textos e elementos: 
   Nessa aula começamos organizando nosso código CSS e depois alinhamos os textos e elementos da página utilizando as propriedades do CSS: `text-align`

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/alinhando-textos-e-elementos.zip)

####################################################################################################
13. Mais ajustes de textos: 
   Nessa aula fizemos alguns ajustes nos textos do nosso projeto e aprendemos como quebrar linhas e uma maneira de utilizar espaços.

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/mais-ajustes-de-textos.zip)

####################################################################################################
14. Trabalhando com espacamentos: 
   Nessa aula aprendemos sobre as propriedades `margin` do CSS, aplicamos o *shorthand* em um trecho de código e ajustamos os espaçamentos do nosso projeto.


# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/trabalhando-com-espacamentos.zip)

####################################################################################################
15. Bordas e classificacoes de elementos: 
   Nessa aula aprendemos como adicionar uma linha em nossa página com a propriedade `border` do CSS

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/bordas-e-classificacoes.zip)

####################################################################################################
16. Posicionando elementos: 
   Nessa aula nós aprendemos sobre posicionamento de elementos na página utilizando a propriedade `position` do CSS.

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/posicionando-elementos.zip)

####################################################################################################
17. Finalizando esta etapa: 
   Revisão de tudo que foi visto nesse módulo.

# Links

### Resultado final

[Móveis customizados](https://explorer-stage02-p01.vercel.app/)

####################################################################################################
18. Utilizando o codepen para enviar desafios: 
   Nessa aula o Mayk ensina como enviar o desafio para a plataforma utilizando a ferramenta Codepen e para hospedar as imagens podemos utilizar a plataforma imgur

## Links:

[CodePen](https://codepen.io/your-work)

[Imgur](https://imgur.com/)

####################################################################################################
01. Navegador e editor de codigo: 
   Nessa primeira aula instalamos os programas necessários para começar a programar.

# Links

### Navegadores

[Baixe o Navegador da Web do Microsoft Edge | Microsoft](https://www.microsoft.com/pt-br/edge)

[Navegador da Web Google Chrome](https://www.google.com/intl/pt-BR/chrome/)

### Opcional

[Momentum Dash](https://momentumdash.com/)

### Editor de código

[Visual Studio Code - Code Editing. Redefined](https://code.visualstudio.com/)

####################################################################################################
02. Introducao ao HTML: 
   Nessa aula demos introdução ao HTML (Hyper Text Markup Language), aprendemos sobre a estrutura inicial do HTML e suas tags.

# Código

- HTML
[index.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/introducao-ao-html.html)

# Código zipado

- [HTML.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/introducao-ao-html.zip)

# Material complementar

- [Glossário HTML: Principais elementos HTML](https://efficient-sloth-d85.notion.site/Principais-elementos-HTML-da8b750fee5b49f2923fdc35b1c921fc)

####################################################################################################
04. Introducao ao CSS: 
   Nessa aula demos introdução ao CSS (Cascading Style Sheets), o CSS é tudo que vai dar estilos ao nosso site. Vimos sobre propriedades, seletores e suas especificidades.

# Código

- CSS

- [css.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/introducao-ao-css.html)

# Código zipado

[CSS.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/introducao-ao-css.zip)

####################################################################################################
05. O que iremos desenvolver e o que e o Figma: 
   Nessa aula apresentamos a ferramenta Figma e o projeto que iremos desenvolver durante o Stage 02.

# Links

[ARQUIVO DO PROJETO NO FIGMA: Explorer - Projeto 01](https://www.figma.com/file/fAvYZz4dPV5MfhL77XkqkD/Explorer---Projeto-01/duplicate)
[Guia "Instalando e configurando o Figma"](https://efficient-sloth-d85.notion.site/Instalando-e-configurando-o-Figma-df1b0905710d4f21b55cb3c323631574)

####################################################################################################
07. Iniciando o projeto 01: 
   Nessa aula codificamos a estrutura inicial do nosso projeto, passando por todos os elementos do HTML *(head, meta, body)*.

# Link do Projeto

[ARQUIVO DO PROJETO NO FIGMA: Explorer - Projeto 01](https://www.figma.com/file/fAvYZz4dPV5MfhL77XkqkD/Explorer---Projeto-01/duplicate)

# Código

- Projeto01
    
    [index.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/iniciando-o-projeto-01.html)
    

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/iniciando-o-projeto-01.zip)

####################################################################################################
08. Estruturando o projeto 01: 
   Nessa aula começamos a exportar as imagens do Figma e estruturar o nosso projeto. 

Aprendemos as sobre os elementos `<div>`, `<img>`, `<h1>` , `<a>` e `<p>`. 

Além de novas propriedades como `src`, `href` e `id` .

# Código

- Projeto01

- [index.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/estruturando-o-projeto.html)
- images
[balls.svg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/balls.svg)
[img1.jpg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/img1.jpeg)

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/estruturando-o-projeto.zip)

####################################################################################################
09. Apresentacao e posicao dos elementos na tela: 
   Nessa aula organizamos a posição dos nossos elementos respeitando a ordem do HTML e aprendemos sobre `block` e `inline` e acrescentamos mais dois novos elementos `<span>` e `<strong>`        

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/apresentacao-e-posicao-dos-elementos-na-tela.zip)

####################################################################################################
10. Aplicando fontes customizadas e iniciando o CSS: 
   Nessa aula aplicamos fontes customizadas e demos inicio a estilização do nosso projeto 01. 

### Links:

[Open Sans - Google Fonts](https://fonts.google.com/specimen/Open+Sans?query=open+sans)

[Inter - Google Fonts](https://fonts.google.com/specimen/Inter?query=inter)

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/aplicando-fontes-customizadas.zip)

####################################################################################################
11. Trabalhando com cores e fontes: 
   Nessa aula começamos a dar cores ao textos do nosso projeto de acordo com o layout do Figma. Também aprendemos algumas propriedades do CSS: `color`, `font-size`, `line-height`, `font-weight`

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/trabalhando-com-cores.zip)

####################################################################################################
12. Alinhando textos e elementos: 
   Nessa aula começamos organizando nosso código CSS e depois alinhamos os textos e elementos da página utilizando as propriedades do CSS: `text-align`

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/alinhando-textos-e-elementos.zip)

####################################################################################################
13. Mais ajustes de textos: 
   Nessa aula fizemos alguns ajustes nos textos do nosso projeto e aprendemos como quebrar linhas e uma maneira de utilizar espaços.

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/mais-ajustes-de-textos.zip)

####################################################################################################
14. Trabalhando com espacamentos: 
   Nessa aula aprendemos sobre as propriedades `margin` do CSS, aplicamos o *shorthand* em um trecho de código e ajustamos os espaçamentos do nosso projeto.


# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/trabalhando-com-espacamentos.zip)

####################################################################################################
15. Bordas e classificacoes de elementos: 
   Nessa aula aprendemos como adicionar uma linha em nossa página com a propriedade `border` do CSS

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/bordas-e-classificacoes.zip)

####################################################################################################
16. Posicionando elementos: 
   Nessa aula nós aprendemos sobre posicionamento de elementos na página utilizando a propriedade `position` do CSS.

# Código zipado

[Projeto 01.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/01/posicionando-elementos.zip)

####################################################################################################
17. Finalizando esta etapa: 
   Revisão de tudo que foi visto nesse módulo.

# Links

### Resultado final

[Móveis customizados](https://explorer-stage02-p01.vercel.app/)

####################################################################################################
18. Utilizando o codepen para enviar desafios: 
   Nessa aula o Mayk ensina como enviar o desafio para a plataforma utilizando a ferramenta Codepen e para hospedar as imagens podemos utilizar a plataforma imgur

## Links:

[CodePen](https://codepen.io/your-work)

[Imgur](https://imgur.com/)