####################################################################################################
01. Apresentando o projeto 02: 
   Apresentação do projeto 02 trabalhando com textos, posicionamentos, espaçamentos e introdução a novas propriedades.

# Link do Projeto

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

####################################################################################################
03. Estruturando HTML com tags semanticas: 
   Nessa aula demos início ao novo projeto utilizando as tags semânticas do HTML como `<header>`, `<nav>`, `<ul>`, `<li>`, `<main>`, `<section>` e `<footer>`


# Código

- Projeto02
    
    [index.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/index.html)
    
    - images
        
        [balls.svg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/balls.svg)
        
        [img.png](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/img.png)
        
        [logo.svg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/logo.svg)
        
        [whats.svg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/whats.svg)
        

# Código zipado

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

####################################################################################################
04. Finalizando a estrutura do HTML semantico: 
   Explicação e revisão de tudo que fizemos na aula anterior e continuação da sessão footer.

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/finalizando-estrutura-html.zip)

####################################################################################################
05. O conceito Box Model do CSS: 
   Nessa aula vimos os conceitos do Box Model do CSS, entendemos a diferença entre `margin` e `padding` e começamos a estilizar o nosso projeto.

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/conceito-box-model.zip)

####################################################################################################
06. Conhecendo a ferramenta de desenvolvimento DevTools: 
   Nessa aula vamos conhecer a ferramenta DevTools que vem por padrão em nosso navegador, com essa ferramenta conseguimos ver na prática o conceito de Box Model de forma visual. 

# Links

[Chrome DevTools - Chrome Developers](https://developer.chrome.com/docs/devtools/)

[Microsoft Edge DevTools documentation - Microsoft Edge Development](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/landing/)

####################################################################################################
07. O conceito de Flexbox do CSS: 
   Nessa aula utilizamos a ferramenta DevTools para ajudar com a criação do menu do nosso projeto. Com ela, conseguimos ver as alterações em tempo real e depois passamos tudo para o código.

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/conceito-flex-box.zip)

####################################################################################################
08. Melhorias na acessibilidade e refatoracao: 
   Nessa aula entendemos mais sobre os conceitos de acessibilidade e refatoramos o nosso código para um melhor entendimento.

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/melhorias-na-acessbilidade.zip)

####################################################################################################
09. Adicionando as fontes e melhorando os textos: 
   Nessa aula adicionamos fontes e cores personalizadas de acordo com o layout do Figma. Além disso, entendemos ainda mais sobre especificidade dos elementos no CSS.

## Links

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

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

# Código zipado

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

####################################################################################################
10. Aplicando alinhamentos e espacamentos no main e no footer: 
   Nessa aula aplicamos os alinhamentos e espaçamentos nos elementos `main` e `footer` de acordo com o layout do Figma.

# Código zipado

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

####################################################################################################
11. Configurando o botao: 
   Nessa aula fizemos a estilização do botão da página, aprendemos novas propriedades do CSS como: `background`, `cursor` e `border-radius` .

# Código zipado

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

####################################################################################################
12. Background linear-gradient e ajustes finais: 
   Nessa aula aprendemos como utilizar a função `linear-gradient()` entendemos as suas propriedades e vimos uma ferramenta para gerar esses gradientes. 

## Links:

[CSS Gradient - Generator, Maker, and Background](https://cssgradient.io/)

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/background-linear-gradient.zip)

####################################################################################################
13. Ajustes finais do projeto: 
   Nessa aula corrigimos um errinho de digitação e acrescentamos opacidade no menu do nosso projeto.

# Código
[ajustes-finais.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/ajustes-finais.zip)

# Resultado final

[Treine me](https://explorer-stage-02-02.vercel.app/)

####################################################################################################
01. Apresentando o projeto 02: 
   Apresentação do projeto 02 trabalhando com textos, posicionamentos, espaçamentos e introdução a novas propriedades.

# Link do Projeto

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

####################################################################################################
03. Estruturando HTML com tags semanticas: 
   Nessa aula demos início ao novo projeto utilizando as tags semânticas do HTML como `<header>`, `<nav>`, `<ul>`, `<li>`, `<main>`, `<section>` e `<footer>`


# Código

- Projeto02
    
    [index.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/index.html)
    
    - images
        
        [balls.svg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/balls.svg)
        
        [img.png](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/img.png)
        
        [logo.svg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/logo.svg)
        
        [whats.svg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/whats.svg)
        

# Código zipado

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

####################################################################################################
04. Finalizando a estrutura do HTML semantico: 
   Explicação e revisão de tudo que fizemos na aula anterior e continuação da sessão footer.

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/finalizando-estrutura-html.zip)

####################################################################################################
05. O conceito Box Model do CSS: 
   Nessa aula vimos os conceitos do Box Model do CSS, entendemos a diferença entre `margin` e `padding` e começamos a estilizar o nosso projeto.

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/conceito-box-model.zip)

####################################################################################################
06. Conhecendo a ferramenta de desenvolvimento DevTools: 
   Nessa aula vamos conhecer a ferramenta DevTools que vem por padrão em nosso navegador, com essa ferramenta conseguimos ver na prática o conceito de Box Model de forma visual. 

# Links

[Chrome DevTools - Chrome Developers](https://developer.chrome.com/docs/devtools/)

[Microsoft Edge DevTools documentation - Microsoft Edge Development](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/landing/)

####################################################################################################
07. O conceito de Flexbox do CSS: 
   Nessa aula utilizamos a ferramenta DevTools para ajudar com a criação do menu do nosso projeto. Com ela, conseguimos ver as alterações em tempo real e depois passamos tudo para o código.

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/conceito-flex-box.zip)

####################################################################################################
08. Melhorias na acessibilidade e refatoracao: 
   Nessa aula entendemos mais sobre os conceitos de acessibilidade e refatoramos o nosso código para um melhor entendimento.

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/melhorias-na-acessbilidade.zip)

####################################################################################################
09. Adicionando as fontes e melhorando os textos: 
   Nessa aula adicionamos fontes e cores personalizadas de acordo com o layout do Figma. Além disso, entendemos ainda mais sobre especificidade dos elementos no CSS.

## Links

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

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

# Código zipado

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

####################################################################################################
10. Aplicando alinhamentos e espacamentos no main e no footer: 
   Nessa aula aplicamos os alinhamentos e espaçamentos nos elementos `main` e `footer` de acordo com o layout do Figma.

# Código zipado

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

####################################################################################################
11. Configurando o botao: 
   Nessa aula fizemos a estilização do botão da página, aprendemos novas propriedades do CSS como: `background`, `cursor` e `border-radius` .

# Código zipado

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

####################################################################################################
12. Background linear-gradient e ajustes finais: 
   Nessa aula aprendemos como utilizar a função `linear-gradient()` entendemos as suas propriedades e vimos uma ferramenta para gerar esses gradientes. 

## Links:

[CSS Gradient - Generator, Maker, and Background](https://cssgradient.io/)

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/background-linear-gradient.zip)

####################################################################################################
13. Ajustes finais do projeto: 
   Nessa aula corrigimos um errinho de digitação e acrescentamos opacidade no menu do nosso projeto.

# Código
[ajustes-finais.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/ajustes-finais.zip)

# Resultado final

[Treine me](https://explorer-stage-02-02.vercel.app/)

####################################################################################################
01. Apresentando o projeto 02: 
   Apresentação do projeto 02 trabalhando com textos, posicionamentos, espaçamentos e introdução a novas propriedades.

# Link do Projeto

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

####################################################################################################
03. Estruturando HTML com tags semanticas: 
   Nessa aula demos início ao novo projeto utilizando as tags semânticas do HTML como `<header>`, `<nav>`, `<ul>`, `<li>`, `<main>`, `<section>` e `<footer>`


# Código

- Projeto02
    
    [index.html](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/index.html)
    
    - images
        
        [balls.svg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/balls.svg)
        
        [img.png](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/img.png)
        
        [logo.svg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/logo.svg)
        
        [whats.svg](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/whats.svg)
        

# Código zipado

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

####################################################################################################
04. Finalizando a estrutura do HTML semantico: 
   Explicação e revisão de tudo que fizemos na aula anterior e continuação da sessão footer.

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/finalizando-estrutura-html.zip)

####################################################################################################
05. O conceito Box Model do CSS: 
   Nessa aula vimos os conceitos do Box Model do CSS, entendemos a diferença entre `margin` e `padding` e começamos a estilizar o nosso projeto.

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/conceito-box-model.zip)

####################################################################################################
06. Conhecendo a ferramenta de desenvolvimento DevTools: 
   Nessa aula vamos conhecer a ferramenta DevTools que vem por padrão em nosso navegador, com essa ferramenta conseguimos ver na prática o conceito de Box Model de forma visual. 

# Links

[Chrome DevTools - Chrome Developers](https://developer.chrome.com/docs/devtools/)

[Microsoft Edge DevTools documentation - Microsoft Edge Development](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/landing/)

####################################################################################################
07. O conceito de Flexbox do CSS: 
   Nessa aula utilizamos a ferramenta DevTools para ajudar com a criação do menu do nosso projeto. Com ela, conseguimos ver as alterações em tempo real e depois passamos tudo para o código.

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/conceito-flex-box.zip)

####################################################################################################
08. Melhorias na acessibilidade e refatoracao: 
   Nessa aula entendemos mais sobre os conceitos de acessibilidade e refatoramos o nosso código para um melhor entendimento.

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/melhorias-na-acessbilidade.zip)

####################################################################################################
09. Adicionando as fontes e melhorando os textos: 
   Nessa aula adicionamos fontes e cores personalizadas de acordo com o layout do Figma. Além disso, entendemos ainda mais sobre especificidade dos elementos no CSS.

## Links

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

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

# Código zipado

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

####################################################################################################
10. Aplicando alinhamentos e espacamentos no main e no footer: 
   Nessa aula aplicamos os alinhamentos e espaçamentos nos elementos `main` e `footer` de acordo com o layout do Figma.

# Código zipado

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

####################################################################################################
11. Configurando o botao: 
   Nessa aula fizemos a estilização do botão da página, aprendemos novas propriedades do CSS como: `background`, `cursor` e `border-radius` .

# Código zipado

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

####################################################################################################
12. Background linear-gradient e ajustes finais: 
   Nessa aula aprendemos como utilizar a função `linear-gradient()` entendemos as suas propriedades e vimos uma ferramenta para gerar esses gradientes. 

## Links:

[CSS Gradient - Generator, Maker, and Background](https://cssgradient.io/)

# Código zipado

[Projeto 02.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/background-linear-gradient.zip)

####################################################################################################
13. Ajustes finais do projeto: 
   Nessa aula corrigimos um errinho de digitação e acrescentamos opacidade no menu do nosso projeto.

# Código
[ajustes-finais.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/nivel-02/02/ajustes-finais.zip)

# Resultado final

[Treine me](https://explorer-stage-02-02.vercel.app/)