Design Frontend

Trabalho — Desafios Frontend Mentor

Curso: Análise e Desenvolvimento de Sistemas

Disciplina: Design e Desenvolvimento Frontend

Valor: 3 pontos

Allan da Silva
Design Frontend

📋 Sobre o Trabalho

  • Você deverá escolher um dos 3 desafios disponíveis e implementar a solução completa;
  • Os desafios são inspirados na plataforma Frontend Mentor;
  • O objetivo é praticar HTML, CSS e (opcionalmente) JavaScript;
  • O trabalho deve ser entregue via GitHub.

🔗 Repositório oficial com os desafios:
github.com/ADS-Unipar/desafios-frontend

Allan da Silva
Design Frontend

🎯 Desafios Disponíveis

# Desafio Dificuldade Tecnologias
1 🎫 Gerador de Ingresso para Conferência Iniciante a Intermediário HTML, CSS, JS (opcional)
2 🛒 Card de Resumo do Pedido Iniciante HTML, CSS
3 📊 Card de Prévia de Estatísticas Iniciante HTML, CSS

Escolha UM desafio para desenvolver.

Allan da Silva
Design Frontend

Desafio 01 — 🎫 Gerador de Ingresso para Conferência

Dificuldade: Iniciante a Intermediário

  • Construa um gerador de ingresso para conferência;
  • Layout com formulário e exibição do ingresso;
  • A geração dinâmica com JavaScript é um bônus opcional;
  • O ingresso pode ser construído como elemento estático com HTML + CSS.

📁 Acessar desafio →

Allan da Silva
Design Frontend

Desafio 02 — 🛒 Card de Resumo do Pedido

Dificuldade: Iniciante

  • Construa um componente de card de resumo do pedido;
  • Deve conter estados de hover interativos;
  • Layout limpo e responsivo;
  • Foco em CSS e detalhes visuais.

📁 Acessar desafio →

Allan da Silva
Design Frontend

Desafio 03 — 📊 Card de Prévia de Estatísticas

Dificuldade: Iniciante

  • Construa um componente de card com prévia de estatísticas;
  • Layout com imagem de fundo e sobreposição de dados;
  • Design responsivo e moderno;
  • Excelente exercício de CSS Grid ou Flexbox.

📁 Acessar desafio →

Allan da Silva
Design Frontend

📐 Requisitos Obrigatórios

Para garantir a nota completa (3 pontos), seu trabalho deve atender:

  1. Layout responsivo — funciona em mobile e desktop;
  2. HTML semântico — uso correto de tags (header, main, section, etc.);
  3. Fidelidade ao design — o resultado deve ser próximo ao design de referência;
  4. Código organizado — indentação consistente e nomes descritivos;
  5. Repositório no GitHub — código publicado com README.md explicativo.
Allan da Silva
Design Frontend

📊 Critérios de Avaliação

Critério Pontuação
Layout responsivo (mobile + desktop) 0,5
HTML semântico e acessível 0,5
Fidelidade ao design de referência 1,0
Código organizado e limpo 0,5
Repositório no GitHub com README 0,5
Total 3,0
Allan da Silva
Design Frontend

🚀 Como Entregar

  1. Acesse o repositório: github.com/ADS-Unipar/desafios-frontend;
  2. Leia o README.md do desafio escolhido;
  3. Consulte o style-guide.md para cores, fontes e tamanhos;
  4. Implemente sua solução;
  5. Crie um repositório público no seu GitHub;
  6. Publique seu código e inclua um README.md explicando o projeto;
  7. Envie o link do repositório como entrega.
Allan da Silva
Design Frontend

📅 Prazo de Entrega

  • Data limite: a definir em sala de aula;
  • Trabalhos entregues após o prazo perderão 0,5 ponto por dia de atraso;
  • Em caso de dúvidas, consulte o professor.
Allan da Silva
Design Frontend

💡 Dicas

  • Cada desafio contém designs para mobile e desktop na pasta /design;
  • Os recursos (imagens, fontes) já estão incluídos em cada projeto;
  • Use o style-guide.md como referência para cores e tipografia;
  • Sinta-se livre para usar frameworks (Bootstrap, Tailwind) se desejar;
  • Foque em responsividade e qualidade do código.
Allan da Silva
Design Frontend

📚 Referências

Allan da Silva
Design Frontend

Boa sorte! 🎉

Qualquer dúvida, consulte o professor.

Allan da Silva