Projeto construĂdo como exemplo para o evento Palestras de TI, do SENAC PortĂŁo, no dia 17 de agosto de 2020.
- Primeiramente de uma xĂcara de cafĂ© bem quentinho â;
- O editor de código Visual Studio Code, da Microsoft. Além de ter vårios recursos interessantes, é o mesmo utilizado na aula gravada da palestra.
- A extensĂŁo Live Sass Compiler, que vocĂȘ pode instalar diretamente do seu VSCode, na aba ExtensĂ”es;
- Ela pode ser visualizada com o atalho
Ctrl + Shift + X
(ouâ + Shift + X
no Mac);
- Ela pode ser visualizada com o atalho
- A extensĂŁo Live Server, que pode ser encontrada da mesma forma.
A partir de um terminal (cmd, bash, ...):
# Clone o repositĂłrio
$ git clone https://github.com/MattZ6/palestra-senac-2020.git musiquinhas
# Entre na pasta do projeto
$ cd musiquinhas
# Abra o VSCode na pasta do projeto
$ code .
Com o editor de cĂłdigo aberto na pasta do projeto, vocĂȘ irĂĄ notar dois botĂ”es no canto inferior direito do mesmo: Go Live & Watch Sass.
Ao clicar no botĂŁo Go Live, a extensĂŁo irĂĄ "servir" localmente a pĂĄgina na porta 5500
- basicamente abrir seu navegador com a aplicação no endereço http://localhost:5500
. Isso irå servir de hot reload em tempo de desenvolvimento, ou seja, todas as alteraçÔes feitas dentro dos arquivos do projeto irão refletir na atualização da pågina (assim não precisamos ficar apertando F5
o tempo todo đ);
O segundo botĂŁo habilitado pelas extensĂ”es instaladas Ă© o Watch Sass. Quando habilitado, irĂĄ fazer com que todo o cĂłdigo escrito utilizando SASS seja transformado em CSS puro, assim tornando nossa pĂĄgina super estilosa. đ đ»