Página de FAQ
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
👉🏽 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
Aulas
- 1.
Introdução ao projeto FAQ Page
00:33 - 2.
Participando do mini projeto no Codante
01:15 - 3.
Análise dos requisitos
02:55 - 4.
Configurando o projeto
09:42 - 5.
Desenvolvendo o container do FAQ
25:19 - 6.
Usando a tag template para criar as perguntas do FAQ
10:30 - 7.
Implementando o collapse/expand das perguntas
11:27 - 8.
Implementando a responsividade
07:40 - 9.
Fazendo o deploy
03:36