####################################################################################################
01. Visao geral do projeto: 
   Nessa aula apresentamos o projeto que iremos desenvolver nesse módulo. Trabalharemos com formulários para capturar dados através da web.

# Link do Projeto

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

####################################################################################################
03. Entendendo os campos HTML: 
   Nessa aula apresentamos alguns tipos de input existentes no HTML:  `text`, `password`, `number`, `checkbox` além deles, foi apresentado mais dois tipos de tags: `select` e `text-area`.


# Código zipado

[entendendo-campos-html.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/entendendo-campos-html.zip)

####################################################################################################
04. Como funcionam os formularios no HTML: 
   Nessa aula aprendemos como funciona os formulários no HTML seus atributos `action` e `method` e os tipos de métodos que podem ser passados através de um formulário (`GET` e `POST`)
    

# Código zipado

[como-funcionam-formularios.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/como-funcionam-formularios.zip)

####################################################################################################
05. Simulando a busca do google: 
   Nessa aula vimos na prática como funciona uma busca do Google. Utilizando a tag `<form>` para passar os inputs do tipo `text`, `hidden` e `submit`
    

# Código zipado

[simluando-busca-google.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/simluando-busca-google.zip)

####################################################################################################
06. Iniciando a estrutura do HTML e configuracoes do VSCode: 
   Nessa aula demos inicio ao nosso projeto, começamos estruturando toda a página e adicionamos a extensão Live Server para agilizar a nossa produtividade dentro do VS Code.

### Links

[Live Server - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
    

# Código zipado

[inciando-estrutura-html.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/inciando-estrutura-html.zip)

####################################################################################################
07. Iniciando os estilos da pagina: 
   Nessa aula começamos o processo de estilização da nossa página, aplicando cores e fontes. Aprenderemos sobre *pseudo-elements* no CSS e trabalharemos com posicionamento `z-index`.


# Código zipado

[iniciando-estilos-da-pag.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/iniciando-estilos-da-pag.zip)

####################################################################################################
08. Agrupando campos com fieldset e legend: 
   Nessa aula conhecemos mais duas tags HTML **`<fieldset>` e `<legend>` para agrupar todos nossos campos e dar descrições ao mesmo.**
    

# Código zipado

[agrupando-campos-fieldset.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/agrupando-campos-fieldset.zip)

####################################################################################################
09. Formatando o campo de texto: 
   Nessa aula começamos a estilizar os nossos campos de formulários de acordo com o layout do Figma respeitando as suas dimensões.
    

# Código zipado

[formatando-campo-texto.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/formatando-campo-texto.zip)

####################################################################################################
10. Ajustando novos campos dentro do fieldset: 
   Nessa aula demos continuidade da estilização dos campos do nosso formulário, utilizamos outros tipos de input como `url` e `number`. Aprendemos uma nova tag do HTML `<textarea>` além de fazer ajustes nas questões de acessibilidade.
    

# Código zipado

[ajustando-novos-campos.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/ajustando-novos-campos.zip)

####################################################################################################
11. Estilizando o campo select: 
   Nessa aula estilizamos o campo select e aprendemos algumas técnicas interessantes do CSS aprimorando ainda mais o nosso projeto. Também conhecemos 2 sites incríveis para nos ajudar no dia a dia como programador(a).

### Links:

[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/)

[URL-encoder for SVG](https://yoksel.github.io/url-encoder/)

# Código zipado

[estilizando-campo-select.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/estilizando-campo-select.zip)

####################################################################################################
12. Aplicando estilos aos agrupamentos restantes: 
   Nessa aula demos continuidade em nosso projeto agrupando mais campos de formulário e conhecemos novos tipos de input: `email`, `password`, `date` e `time`
    

# Código zipado

[aplicando-estilo-aos-agrupamentos.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/aplicando-estilo-aos-agrupamentos.zip)

####################################################################################################
13. Checkbox customizado e com acessibilidade: 
   Nessa aula aprendemos como personalizar um input do tipo `checkbox` no CSS. Lidamos com posicionamento, utilizamos *pseudo-classes* e trabalhamos com acessibilidade.
    

# Código zipado

[checkbox-customizado.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/checkbox-customizado.zip)

####################################################################################################
14. Criando estilos para o submit: 
   Nessa aula fizemos a última sessão do nosso projeto, além disso, inserimos o botão na página e personalizamos de acordo com o layout.
    

# Código zipado

[criando-estilos-submit.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/criando-estilos-submit.zip)

####################################################################################################
15. Validando campos e submetendo formularios: 
   Nessa aula fizemos a validação dos formulários que eram obrigatórios preencher com a propriedade `require` dentro dos nossos inputs. Além disso, estilizamos essas obrigatoriedades com CSS para ficar acessível e mais visual.
    

# Código zipado

[validando-campos.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/validando-campos.zip)

# Resultado final

[Crie seu evento](https://explorer-stage03-p01.vercel.app/)

####################################################################################################
01. Visao geral do projeto: 
   Nessa aula apresentamos o projeto que iremos desenvolver nesse módulo. Trabalharemos com formulários para capturar dados através da web.

# Link do Projeto

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

####################################################################################################
03. Entendendo os campos HTML: 
   Nessa aula apresentamos alguns tipos de input existentes no HTML:  `text`, `password`, `number`, `checkbox` além deles, foi apresentado mais dois tipos de tags: `select` e `text-area`.


# Código zipado

[entendendo-campos-html.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/entendendo-campos-html.zip)

####################################################################################################
04. Como funcionam os formularios no HTML: 
   Nessa aula aprendemos como funciona os formulários no HTML seus atributos `action` e `method` e os tipos de métodos que podem ser passados através de um formulário (`GET` e `POST`)
    

# Código zipado

[como-funcionam-formularios.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/como-funcionam-formularios.zip)

####################################################################################################
05. Simulando a busca do google: 
   Nessa aula vimos na prática como funciona uma busca do Google. Utilizando a tag `<form>` para passar os inputs do tipo `text`, `hidden` e `submit`
    

# Código zipado

[simluando-busca-google.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/simluando-busca-google.zip)

####################################################################################################
06. Iniciando a estrutura do HTML e configuracoes do VSCode: 
   Nessa aula demos inicio ao nosso projeto, começamos estruturando toda a página e adicionamos a extensão Live Server para agilizar a nossa produtividade dentro do VS Code.

### Links

[Live Server - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
    

# Código zipado

[inciando-estrutura-html.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/inciando-estrutura-html.zip)

####################################################################################################
07. Iniciando os estilos da pagina: 
   Nessa aula começamos o processo de estilização da nossa página, aplicando cores e fontes. Aprenderemos sobre *pseudo-elements* no CSS e trabalharemos com posicionamento `z-index`.


# Código zipado

[iniciando-estilos-da-pag.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/iniciando-estilos-da-pag.zip)

####################################################################################################
08. Agrupando campos com fieldset e legend: 
   Nessa aula conhecemos mais duas tags HTML **`<fieldset>` e `<legend>` para agrupar todos nossos campos e dar descrições ao mesmo.**
    

# Código zipado

[agrupando-campos-fieldset.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/agrupando-campos-fieldset.zip)

####################################################################################################
09. Formatando o campo de texto: 
   Nessa aula começamos a estilizar os nossos campos de formulários de acordo com o layout do Figma respeitando as suas dimensões.
    

# Código zipado

[formatando-campo-texto.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/formatando-campo-texto.zip)

####################################################################################################
10. Ajustando novos campos dentro do fieldset: 
   Nessa aula demos continuidade da estilização dos campos do nosso formulário, utilizamos outros tipos de input como `url` e `number`. Aprendemos uma nova tag do HTML `<textarea>` além de fazer ajustes nas questões de acessibilidade.
    

# Código zipado

[ajustando-novos-campos.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/ajustando-novos-campos.zip)

####################################################################################################
11. Estilizando o campo select: 
   Nessa aula estilizamos o campo select e aprendemos algumas técnicas interessantes do CSS aprimorando ainda mais o nosso projeto. Também conhecemos 2 sites incríveis para nos ajudar no dia a dia como programador(a).

### Links:

[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/)

[URL-encoder for SVG](https://yoksel.github.io/url-encoder/)

# Código zipado

[estilizando-campo-select.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/estilizando-campo-select.zip)

####################################################################################################
12. Aplicando estilos aos agrupamentos restantes: 
   Nessa aula demos continuidade em nosso projeto agrupando mais campos de formulário e conhecemos novos tipos de input: `email`, `password`, `date` e `time`
    

# Código zipado

[aplicando-estilo-aos-agrupamentos.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/aplicando-estilo-aos-agrupamentos.zip)

####################################################################################################
13. Checkbox customizado e com acessibilidade: 
   Nessa aula aprendemos como personalizar um input do tipo `checkbox` no CSS. Lidamos com posicionamento, utilizamos *pseudo-classes* e trabalhamos com acessibilidade.
    

# Código zipado

[checkbox-customizado.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/checkbox-customizado.zip)

####################################################################################################
14. Criando estilos para o submit: 
   Nessa aula fizemos a última sessão do nosso projeto, além disso, inserimos o botão na página e personalizamos de acordo com o layout.
    

# Código zipado

[criando-estilos-submit.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/criando-estilos-submit.zip)

####################################################################################################
15. Validando campos e submetendo formularios: 
   Nessa aula fizemos a validação dos formulários que eram obrigatórios preencher com a propriedade `require` dentro dos nossos inputs. Além disso, estilizamos essas obrigatoriedades com CSS para ficar acessível e mais visual.
    

# Código zipado

[validando-campos.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/validando-campos.zip)

# Resultado final

[Crie seu evento](https://explorer-stage03-p01.vercel.app/)

####################################################################################################
01. Visao geral do projeto: 
   Nessa aula apresentamos o projeto que iremos desenvolver nesse módulo. Trabalharemos com formulários para capturar dados através da web.

# Link do Projeto

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

####################################################################################################
03. Entendendo os campos HTML: 
   Nessa aula apresentamos alguns tipos de input existentes no HTML:  `text`, `password`, `number`, `checkbox` além deles, foi apresentado mais dois tipos de tags: `select` e `text-area`.


# Código zipado

[entendendo-campos-html.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/entendendo-campos-html.zip)

####################################################################################################
04. Como funcionam os formularios no HTML: 
   Nessa aula aprendemos como funciona os formulários no HTML seus atributos `action` e `method` e os tipos de métodos que podem ser passados através de um formulário (`GET` e `POST`)
    

# Código zipado

[como-funcionam-formularios.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/como-funcionam-formularios.zip)

####################################################################################################
05. Simulando a busca do google: 
   Nessa aula vimos na prática como funciona uma busca do Google. Utilizando a tag `<form>` para passar os inputs do tipo `text`, `hidden` e `submit`
    

# Código zipado

[simluando-busca-google.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/simluando-busca-google.zip)

####################################################################################################
06. Iniciando a estrutura do HTML e configuracoes do VSCode: 
   Nessa aula demos inicio ao nosso projeto, começamos estruturando toda a página e adicionamos a extensão Live Server para agilizar a nossa produtividade dentro do VS Code.

### Links

[Live Server - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
    

# Código zipado

[inciando-estrutura-html.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/inciando-estrutura-html.zip)

####################################################################################################
07. Iniciando os estilos da pagina: 
   Nessa aula começamos o processo de estilização da nossa página, aplicando cores e fontes. Aprenderemos sobre *pseudo-elements* no CSS e trabalharemos com posicionamento `z-index`.


# Código zipado

[iniciando-estilos-da-pag.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/iniciando-estilos-da-pag.zip)

####################################################################################################
08. Agrupando campos com fieldset e legend: 
   Nessa aula conhecemos mais duas tags HTML **`<fieldset>` e `<legend>` para agrupar todos nossos campos e dar descrições ao mesmo.**
    

# Código zipado

[agrupando-campos-fieldset.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/agrupando-campos-fieldset.zip)

####################################################################################################
09. Formatando o campo de texto: 
   Nessa aula começamos a estilizar os nossos campos de formulários de acordo com o layout do Figma respeitando as suas dimensões.
    

# Código zipado

[formatando-campo-texto.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/formatando-campo-texto.zip)

####################################################################################################
10. Ajustando novos campos dentro do fieldset: 
   Nessa aula demos continuidade da estilização dos campos do nosso formulário, utilizamos outros tipos de input como `url` e `number`. Aprendemos uma nova tag do HTML `<textarea>` além de fazer ajustes nas questões de acessibilidade.
    

# Código zipado

[ajustando-novos-campos.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/ajustando-novos-campos.zip)

####################################################################################################
11. Estilizando o campo select: 
   Nessa aula estilizamos o campo select e aprendemos algumas técnicas interessantes do CSS aprimorando ainda mais o nosso projeto. Também conhecemos 2 sites incríveis para nos ajudar no dia a dia como programador(a).

### Links:

[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/)

[URL-encoder for SVG](https://yoksel.github.io/url-encoder/)

# Código zipado

[estilizando-campo-select.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/estilizando-campo-select.zip)

####################################################################################################
12. Aplicando estilos aos agrupamentos restantes: 
   Nessa aula demos continuidade em nosso projeto agrupando mais campos de formulário e conhecemos novos tipos de input: `email`, `password`, `date` e `time`
    

# Código zipado

[aplicando-estilo-aos-agrupamentos.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/aplicando-estilo-aos-agrupamentos.zip)

####################################################################################################
13. Checkbox customizado e com acessibilidade: 
   Nessa aula aprendemos como personalizar um input do tipo `checkbox` no CSS. Lidamos com posicionamento, utilizamos *pseudo-classes* e trabalhamos com acessibilidade.
    

# Código zipado

[checkbox-customizado.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/checkbox-customizado.zip)

####################################################################################################
14. Criando estilos para o submit: 
   Nessa aula fizemos a última sessão do nosso projeto, além disso, inserimos o botão na página e personalizamos de acordo com o layout.
    

# Código zipado

[criando-estilos-submit.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/criando-estilos-submit.zip)

####################################################################################################
15. Validando campos e submetendo formularios: 
   Nessa aula fizemos a validação dos formulários que eram obrigatórios preencher com a propriedade `require` dentro dos nossos inputs. Além disso, estilizamos essas obrigatoriedades com CSS para ficar acessível e mais visual.
    

# Código zipado

[validando-campos.zip](https://storage.googleapis.com/golden-wind/explorer/description-assets/n%C3%ADvel-03/1/validando-campos.zip)

# Resultado final

[Crie seu evento](https://explorer-stage03-p01.vercel.app/)