🪧 Vitrine.Dev | |
---|---|
✨ Nome | Alura Challenge Front-End 2ª Edição - Editor de Código |
🏷️ Tecnologias | JAVASCRIPT, HTML, CSS |
🚀 URL | https://jumotac.github.io/AluraChallenge-Code/ |
🔥 Desafio | Alura Challenge Front-End 2 Edição: Implementação de um Editor de Código |
Resolvi participar do CHALLENGE FRONT END 2ª Edição com o objetivo de avaliar a melhora no meu código, separando os código por elementos, seção e trabalhando com clean code.
Foram 4 semanas para implementar um sistema com HTML, CSS, JavaScript e até frameworks SPA, do básico ao avançado, com suporte de especialistas via Discord.
01 - semana:
Implementacao do projeto AluraDev com HTML e CSS baseado em um Figma.
02 - semana: Uso de JavaScript para adicionar Sintaxe Highlight (comportamento no sistema).
03 e 04 - semana: Frameworks SPA, Integrações com APIs. Cards cada vez mais complexos, com muitas sugestões de implementação para você chegar ao avançado do Front-end.
Um produtor de conteúdo de programação solicitou a construção de um editor de texto online para postar trechos de códigos em suas redes sociais. Para ele, o editor precisa ter um layout acessível, simples, bonito e funcional, para que ele possa, inclusive, compartilhar a ferramenta com seus seguidores e seguidoras.
As principais funcionalidades pedidas são:
- um campo para selecionar a linguagem a ser escrita;
- um campo de texto para escrever o código em si;
- e um botão para visualização deste código com o sintaxe highlight com um tema bem bonito.
- É importante que esse projeto seja escalável, ao ponto que, se for necessário adicionar alguma funcionalidade (feature), seja simples fazê-la. Como esse editor é online, é de extrema importância que ele seja responsivo.
É muito importante que o site seja responsivo para dar aos clientes a facilidade de comprar através de dispositivos mobiles.
Ferramentas utilizadas para auxiliar na execução do projeto durante todo o challenge:
-
Figma - Para ter acesso ao PROJETO ORGINAL NO FIGMA
-
Trello - para gerenciar o desenvolvimento do seu projeto.
-
Visual Studio Code - editor de código
-
Github - Para estruturar o portfólio
- Instrutores:
Desenvolvido 💗 por Ju Mota