Frontend Mentor Challenge - URL Shortening
Esse template foi utilizado para a criação do Segundo Projeto da mentoria Conquiste Sua Vaga , para que assim pudesse ser exercitado algumas habilidades de Frontend e assim poder melhorar a base de conhecimento e evoluir de forma consistente.
Sumário
Overview
O Desafio
-
Ver o layout ideal para a interface, dependendo do tamanho da tela do dispositivo
-
Ver o hover e focus para todos os elementos interativos na página
-
Criar uma Landing Page consumindo API de encurtar links
-
Integrar a API de encurtar URL shortcode
-
Persistir os dados no navegador
Screenshot 🎥
Meu processo
-
Selecionar o projeto a ser realizado
-
Após selecionar o projeto, optei por utilizar HTML5, CSS Modules, React, Vite e JavaScript, otimizando assim o desenvolvimento da aplicação
-
Foram realizados alguns esboços no papel de como seria a estrutura do projeto e etc
-
Iniciado o desenvolvimento do código
Stacks utilizadas
 |
 |
 |
 |
 |
 |
 |
|---|
- [x] HTML5 Semântico
- [x] CSS Module
- [x] CSS Flexbox
- [x] CSS Grid
- [x] JavaScript
- [x] React
- [x] Vite
O que aprendi
-
Aprendi uma nova forma de implementar CSS, utilizando o CSS Modules
-
Combinar CSS Grid e Flexbox
-
Uma grande melhoria na gestão desse projeto ao utilizar o método pomodoro
Desenvolvimento Contínuo
Algumas melhorias já estão mapeadas para próxima release, são as seguintes:
- [ ] Implementar funções Javascript
- [ ] Utilizar pré processadores CSS - Em análise
- [ ] Integração com a API de encurtar URL
Author - Diego Girão
Agradecimentos
Meu muito obrigado aos mentores Pedro Marins e Henrique Andrade, assim como os tutores e meus colegas da turma 23c e da comunidade Code no geral, vocês são excelentes e estão sempre aptos a ajudar, parabéns a todos os envolvidos.