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
  • Screenshot
• Meu processo
  • Stacks utilizadas
  • O que aprendi
  • Desenvolvimento Contínuo
• Author
• Agradecimentos

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 🎥

Screencast.from.18-02-2023.14.12.12.webm

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

• HTML5 Semântico
• CSS Module
• CSS Flexbox
• CSS Grid
• JavaScript
• React
• 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.