https://github.com/gustavo-martins-pereira/alura_dev

Project of Challenge Front-End on Alura made for code edition in the web.
https://github.com/gustavo-martins-pereira/alura_dev

alura alura-challenge css3 figma frontend html5 personal-project

Last synced: 30 days ago
JSON representation

Project of Challenge Front-End on Alura made for code edition in the web.

• Host: GitHub
• URL: https://github.com/gustavo-martins-pereira/alura_dev
• Owner: gustavo-martins-pereira
• License: unlicense
• Created: 2024-01-03T21:12:43.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-01-18T16:26:20.000Z (about 1 year ago)
• Last Synced: 2024-11-15T06:26:50.901Z (3 months ago)
• Topics: alura, alura-challenge, css3, figma, frontend, html5, personal-project
• Language: CSS
• Homepage: https://aluradev-opal.vercel.app
• Size: 293 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Code Canvas 🎫

Projeto web para edição e compartilhamento de código no site, com sintaxe *Highlight* de acordo com a linguagem especificada.



## Tecnologias Usadas 🖥

![HTML5 Logo](assets/readme/html-5.svg)

![CSS3 Logo](assets/readme/css-3.svg)

![JavaScript Logo](assets/readme/javascript.svg)

## Como Executar o Projeto ▶

Clone o projeto com o comando:

```bash

git clone https://github.com/Volaxy/aluradev.git

```

em seguida, entre na pasta e abra o arquivo ***index.html*** no navegador de sua preferência.

## Utilização do Editor 🖐

* Na página **Editor de Código**, clique na tela preta e comece a digitar o seu código.

* Para aplicar a sintaxe highlight, selecione a linguagem na *combobox* do lado direito, e clique em **Visualizar com Hightlight**.

> ⚠ Observações:

> * Por padrão a linguagem selecionada é o JavaScript

> * Para aplicar o efeito de highlight depois de digitar é preciso clicar no botão **Visualizar com Hightlight**.

![Codando na parte preta da tela e aplicando o highlight](assets/readme/coding-and-apply-highlight.gif)

* Todos os projetos criado estarão na página **Comunidade**.

![Salvando o projeto e mostrando na página de comunidade](assets/readme/saving-project.gif)

## Link 🔗

[Alura Dev](https://aluradev-opal.vercel.app/) (**Vercel**) 🔗

## Aprendizado do Projeto 🎓

Apliquei os conceitos do **JavaScript** no projeto, além de deixar o site totalmente responsivo para qualquer dispositivo, organizando o código em pedaços para fácil manutenção e implementação de novas features.

## Licença ✒

[Unlicense](https://unlicense.org) 🔗