Tutorial

Página de FAQ

Nível
9 aulas
1h12

Assistir agora

1. Introdução ao projeto FAQ Page

Sobre o Tutorial

Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Página FAQ.

Descrição do projeto

Crie uma página contendo as respostas para as perguntas mais frequentes do seu site. Neste mini projeto, utilize sua criatividade para implementar um design moderno e responsivo para uma página de FAQ com HTML, CSS e JavaScript.

🔨 Requisitos

  • Construa a aplicação com HTML, CSS e JavaScript.
  • As respostas para as perguntas devem ser colapsáveis
    • Ao clicar em uma pergunta, a resposta deverá aparecer logo abaixo.
    • Ao clicar novamente na mesma pergunta, a resposta deverá desaparecer.
  • Não utilize frameworks de estilo. O objetivo é você praticar os fundamentos básicos de CSS.

Deploy

  • Faça o deploy e submeta sua implementação no Codante.

🔍 Dicas

  • Explore a tag template do HTML.
  • Você pode utilizar ferramentas como o Vite para iniciar a implementação do seu projeto.

🎨 Design Sugerido

Temos uma sugestão de design no Figma, mas sinta-se livre para utilizar a criatividade e implementar uma página com o seu estilo próprio.

Figma

🔗 Acesse o link do Figma

👉🏽 Sobre esse mini-projeto

Tecnologias sugeridas

  • HTML
  • CSS
  • JavaScript

❓ FAQ

Posso utilizar bibliotecas como o React?

Você pode utilizar as ferramentas que desejar para implementar esse projeto. Porém, o objetivo principal aqui é exercitar os fundamentos de HTML, CSS e JavaScript e a resolução oficial será implementa dessa maneira.

Posso utilizar frameworks de estilo?

Sim! Apesar do objetivo principal desse projeto ser exercitar suas habilidades com CSS puro, você está livre para utilizar as ferramentas que desejar.

Seu Instrutor

Ícaro Harry

Codante.io

Aulas

  1. 1.

    Introdução ao projeto FAQ Page

    00:33
  2. 2.

    Participando do mini projeto no Codante

    01:15
  3. 3.

    Análise dos requisitos

    02:55
  4. 4.

    Configurando o projeto

    09:42
  5. 5.

    Desenvolvendo o container do FAQ

    25:19
  6. 6.

    Usando a tag template para criar as perguntas do FAQ

    10:30
  7. 7.

    Implementando o collapse/expand das perguntas

    11:27
  8. 8.

    Implementando a responsividade

    07:40
  9. 9.

    Fazendo o deploy

    03:36