Editor de Código - Alura Dev

Este é um editor de código, elaborado para que você compartilhe seus códigos em redes sociais ou onde quiser como imagem com um layout diferente e bonito. Este projeto foi proposto pela Alura durante o Desafio Alura Front-End.

Índice:

• Como utilizar
• Screenshot
• Como executar o projeto localmente
• Tecnologias Utilizadas
• Sobre o Desafio Alura Front-End
• O que aprendi neste desafio
• Próximas implementações

Como utilizar:

• Clique no link descrito, digite ou cole seu código dentro do quadro central. (Linguagens disponíveis: HTML,CSS e Javascript)

• Do lado direito você encontrará "SEU PROJETO" logo abaixo preencha com o nome desejado. Prossiga para o próximo campo e faça uma breve descrição do seu projeto.

• Em "PERSONALIZAÇÃO" selecione a linguagem que foi utilizada previamente para escrever o código no quadro central. Logo abaixo, selecione agora a cor da moldura que deseja.

• Abaixo do quadro central há um botão "Visualizar com Highlight" caso desejar, clique nele e seu código será destacado conforme a linguagem selecionada.

• Para finalizar, clique em "Salvar Projeto" para que este projeto seja salvo. Seus projetos poderão ser vistos na pagina "Comunidade". Você pode acessa-la clicando no menu de navegação no canto superior esquerdo da tela.

Screenshot

Como executar o projeto localmente:

1. Clone o repositório através de download ZIP ou por linha de comando git clone https://github.com/dawkk/AluraChallengeFE.git.

2. Execute o index.html no seu navegador, arrastando do o até o navegador, ou abrindo arquivo selecionando um programa na lista (navegador).

Tecnologias Utilizadas:

• HTML5

• CSS3

• Javascript

• highlightjs

• Local Storage

Sobre o Desafio Alura Front-End:

É dada uma situação problema, prazos e ferramentas para que solucionemos o problema.

História - 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.

Ferramentas - É dado um layout através da ferramenta Figma para que usemos como base para as cores, tamanhos, estilos. Também contamos com um mural do trello listando as atividades que deverão ser implementadas naquela semana, copiamos este mural e controlamos nosso progresso em cada tarefa por meio deste, movendo os cards que estão em desenvolvimento, desenvolvidos ou pausados devido a blockers.

Desenvolvimento - Não é informado em si como fazer cada etapa, contamos com nosso conhecimento e uma lista de apoio com cursos recomendados da Alura que são relacionados aos tópicos. Comunidade: contamos também com um discord da Alura aonde podemos tirar as duvidas entre todos os que estão no desafio e também ver os projetos de outros participantes.

O que aprendi neste desafio:

Este foi o primeiro grande projeto que tive a oportunidade de participar, sou muito grato pelo formato do desafio que me engajou a aplicar os conceitos. Aprendi mais sobre:

• Flexbox e display grid (CSS).
• Layouts Responsivos (CSS).
• Como implementar um menu mobile com interação de abrir e fechar (Javascript, CSS).
• Padrão BEM (CSS).
• Como utilizar HighlightJS API.
• Manipulação DOM (Javascript).
• Alterar CSS com Javascript.

Próximas implementações:

• Barra de pesquisa funcional
• Redirecionar do projeto clicado em comunidade.html para index.html com os dados salvos preenchidos
• Manipular os dados utilizando indexedDB
• Otimizar e Rever Código
• Exportação do código em png
• Alterar nome e foto de perfil
• Adicionar github no perfil