Aplicativo de teste de frontend

Aplicativo web de teste de conhecimentos sobre assuntos relacionados ao desenvolvimento front-end.

Índice

• Visão geral
  • O desafio
  • Captura de tela
  • Links
• Meu processo
  • Construído com
• Autor
• Projeto

Visão geral

O desafio

Os usuários devem ser capazes de:

• Selecione um assunto do questionário
• Selecione uma única resposta de cada pergunta entre quatro opções
• Veja uma mensagem de erro ao tentar enviar uma resposta sem fazer uma seleção
• Veja se eles fizeram uma escolha correta ou incorreta ao enviar uma resposta
• Passe para a próxima pergunta depois de ver o resultado da pergunta
• Veja um estado concluído com a pontuação após a pergunta final
• Jogue novamente para escolher outro assunto
• Veja o layout ideal da interface dependendo do tamanho da tela do dispositivo
• Veja os estados de foco e foco para todos os elementos interativos na página
• Navegue por todo o aplicativo usando apenas o teclado
• Altere o tema do aplicativo entre claro e escuro

Captura de tela

Links

• URL da solução: Repositótio Projeto
• URL Resultado: Resultado

Meu processo

Construído com

• Semantic HTML5 markup
• CSS(Flex-Box, Grid, Normalize)
• Mobile-first workflow
• Responsive Web Design
• Acessibility
• TypeScript
• API Web LocalStorage
• Svelte
• SvelteKit

Author

• Site - Samuel Amaro
• Frontend Mentor - @samuel-amaro

Projeto

Criado um projeto

como criar um novo projeto sveltekit

# cria um novo projeto no diretório atual
npm create svelte@latest

# cria um novo projeto em my-app
npm create svelte@latest my-app

Desenvolvimento

Depois de criar um projeto e instalar dependências com npm install (ou pnpm install ou yarn), inicie um servidor de desenvolvimento:

npm run dev

# ou inicie o servidor e abra o aplicativo em uma nova aba do navegador
npm run dev ---open

Building

Para criar uma versão de produção do seu aplicativo:

npm run build

Você pode visualizar a compilação de produção com npm run preview.

Para implantar seu aplicativo, pode ser necessário instalar um adaptador para seu ambiente de destino.

Scripts

Format, Lint, Check

Formatar o código (Prettier)

npm run format

Executar o Lint

npm run lint

Executar a verificação do Svelte

npm run check #or
npm run check:watch