Curso: Front-End do Bem

AULA 01

- Inicio do Curso

- Instalação do MS Visual Studio Code

- Estrutura de Pastas dentro do MS

Visual Studio Code

- Sugestões de Prática para essa aula

- O que vamos aprender na aula 02

/igor-rebolla
 Inicio do Curso
Curso: Desenvolvedor(a) Front-End para quem está
querendo migrar de área (Front-End do Bem)

100% Gratuito | Sem pegadinhas | Sem pedir e-mail

O Curso foi criado depois de conversar com 35 profissionais das áreas

(Administrativa, Engenharia, Financeiro, Jurídico...) e essas pessoas

relataram que tem vontade de migrar para a Área de Tecnologia (Front-

End) só que acham os termos complicados.

Esse curso vai procurar tratar os “termos complicados” de forma lúdica

(tanto que os exemplos serão baseados no desenvolvimento /construção

de uma casa).

Vamos trabalhar com 3 pilares dentro do curso para que vocês possam dar

os Primeiros passos como Desenvolvedor(a) Front-End. Esses pilares são:

HTML 5 | CSS 3 | JavaScript

/igor-rebolla
 Inicio do Curso
Como assim Igor, qual a relação que uma CASA tem com o

desenvolvimento FrontEnd? Eu respondo, todos os conceitos

básicos abordados aqui, poderão ser replicados para a construção de

um Site. O Exemplo abaixo mostra o que cada um dos 3 pilares do

Front-End tem em relação com uma CASA:

HTML 5 (Os códigos representam a Estrutura da casa);

CSS 3 (Os códigos trazem estilo, como: a Cor da parede);

JavaScript (Os códigos trazem ações para dentro da casa, como:

Acender e Apagar uma lâmpada através do interruptor)

Antes de começarmos a mostrar os conceitos, uma casa para ser

construída precisa de um Software (Programa) específico para dar

formas, cores e etc com base no que o Cliente, Engenheiro, Arquiteto

definiram e assim tornar visível aquela ideia (rascunho) que está no

papel. O programa ao qual eu me refiro aqui é o AUTOCAD® (Este não

será utilizado aqui no curso, apenas foi citado como exemplo).

/igor-rebolla
 Inicio do Curso
E aí vocês me perguntam qual o programa que utilizaremos para o

desenvolvimento de nossa CASA aqui no Curso? Aqui vamos utilizar 2

programas:

Microsoft Visual Studio Code ( o qual vamos inserir nossos códigos);

Google Chrome ( para visualizar o resultado dos códigos que fomos

inserindo no Microsoft Visual Studio Code)

OBS.: Tanto o Microsoft Visual Studio Code quanto o Google Chrome

são gratuitos.

"Tá você, falou, falou e aonde eu procuro esse tal de Microsoft Visual

Studio Code para fazer a instalação?"

A partir da próxima página daremos inicio ao Procedimento de instalação

do Microsoft Visual Studio Code.

/igor-rebolla
 Instalação do Microsoft Visual
Studio Code
º
1 - Clicar no link abaixo que vai dar acesso a página para baixarmos o

Visual Studio (Aqui vamos usar a versão para Windows) que é o Sistema

Operacional instalado aqui no meu computador.

https://code.visualstudio.com/download (Passo 1)

2° - Depois de clicar no Link (Passo 1), vai aparecer essa tela para vocês,

vamos clicar na opção selecionada dentro do retângulo vermelho

(Windows)

/igor-rebolla
 Instalação do Microsoft Visual
Studio Code
3º - Ao clicar na indicação do (Passo 2), o processo de download (baixar)

o Microsoft Visual Studio Code começa automaticamente, só aguardar

(dependendo da velocidade da conexão) pode demorar um pouquinho

mais. Download concluído o arquivo para instalação ficará localizado no

canto inferior esquerda da tela, conforme (Passo 3) abaixo:

/igor-rebolla
 Instalação do Microsoft Visual
Studio Code
4º - Download efetuado, clicar 2x sobre o (Passo 3) que a instalação do

Microsoft Visual Studio Code iniciará. Clicar em Eu aceito o contrato

(Passo 4) e logo em seguida clicar em Próximo (Passo 5) conforme tela

abaixo:

/igor-rebolla
 Instalação do Microsoft Visual
Studio Code
5º Depois de clicar em próximo conforme (Passo 5), a instalação do

Microsoft Visual Studio Code, irá para a tela abaixo mostrando o local

onde o Microsoft Visual Studio Code será instalado no seu computador.

Minha sugestão aqui é não alterar o caminho que vem por padrão. Só

clicar no botão próximo (Passo 6).

/igor-rebolla
 Instalação do Microsoft Visual
Studio Code
6º - Depois de clicar em próximo conforme (passo 6), a tela abaixo

aparecerá sugerindo um nome de Pasta para continuarmos nossa

instalação (Aqui a sugestão também é deixar o que foi recomendado pela

instalação). Só clicar em próximo conforme (passo 7);

/igor-rebolla
 Instalação do Microsoft Visual
Studio Code
7° - Clicou em próximo conforme (passo 7), poderemos escolher se

queremos ou não (colocar um atalho do Microsoft Visual Studio Code na

área de trabalho) representado aqui por um *, eu marquei para colocar

pois facilita minha vida (lembrando que isso é opcional), as outras opções

na tela eu sugiro não alterar. Só clicar em próximo.

/igor-rebolla
 Instalação do Microsoft Visual
Studio Code
8° A tela abaixo mostra um resumo das opções selecionadas nas telas

anteriores. Se estiver tudo OK, só clicar em instalar e aguardar a conclusão

da instalação.

/igor-rebolla
 Instalação do Microsoft Visual
Studio Code
9º - Clicou em instalar conforme (passo 9) a barra de progresso aparecerá
indicando o andamento da instalação:

/igor-rebolla
 Instalação do Microsoft Visual
Studio Code
º
10 - Barra de progresso concluída, automaticamente ela vai para a tela

abaixo, indicando que a instalação do Microsoft Visual Studio Code

terminou e se você deseja iniciar o Microsoft Visual Studio Code (caso

queira iniciá-lo agora) só deixar a opção (Iniciar Visual Studio Code)

marcada e clicar em Concluir

/igor-rebolla
 Instalação do Microsoft Visual
Studio Code

Pronto (Microsoft Visual Studio Code) Instalado, abriremos o Programa

para entender nesse primeiro momento como é a sua estrutura. A

interface(tela) conforme figura abaixo que aparecerá ao iniciarmos o

Microsoft Visual Studio Code pela primeira vez.

Pessoal… esse é o Microsoft Visual Studio Code, Microsoft Visual Studio

Code esse é o Pessoal. Vamos nos ver muito nessa jornada que está

apenas começando.

/igor-rebolla
Estrutura de Pastas e Arquivos
dentro do Microsoft Visual
Studio Code

º
1 - Agora que o Microsoft Visual Studio Code está instalado e vocês

foram devidamente apresentados. Vamos ver como criar uma pasta (local

onde os arquivos) do nosso curso vão ficar alocados e assim poderemos

entender de forma visual como a estrutura de pastas funciona dentro do

Microsoft Visual Studio Code.

Eu estou usando o Microsoft Windows 10, os passos aqui para criar uma

pasta são:

Abrir o Explorador de Arquivos ou Windows Explorer;

Selecionar o Local onde a pasta do curso será criada (eu escolhi o

D:/);

Clicar com o botão direito do mouse e escolher a opção (novo e

depois pasta);

Digitar o nome da Pasta - Aqui eu optei por Curso-FrontEnd

/igor-rebolla
Estrutura de Pastas e Arquivos
dentro do Microsoft Visual
Studio Code
2° - Pasta Curso-FrontEnd devidamente criada, vamos abri-la dentro do

Microsoft Visual Studio Code. Antes Vamos fechar o Get Started (para

fazer isso basta clicar no X) conforme figura abaixo:

/igor-rebolla
Estrutura de Pastas e Arquivos
dentro do Microsoft Visual
Studio Code
3º - Bora abrir dentro do Microsoft Visual Studio Code a pasta Curso-Front
End. Para fazer isso, clicar em FILE (Passo 1)

/igor-rebolla
Estrutura de Pastas e Arquivos
dentro do Microsoft Visual
Studio Code
4° - E clicar em Open Folder (Passo 2)

/igor-rebolla
Estrutura de Pastas e Arquivos
dentro do Microsoft Visual
Studio Code
5º - Agora é clicar no local que criamos a pasta (Eu escolhi a letra D)

conforme passo 3, localize a Pasta Curso-FrontEnd conforme passo 4 e

clique 2x que a Pasta será aberta dentro do Microsoft Visual Studio Code.

/igor-rebolla
Estrutura de Pastas e Arquivos
dentro do Microsoft Visual
Studio Code
6º - Pronto a Pasta Curso-FrontEnd está aberta do lado esquerdo da tela

(o lado esquerdo é o local onde o Microsoft Visual Studio Code

disponibiliza toda a estrutura de pastas e arquivos que iremos utilizar em

nosso projeto. Notem que não tem nada embaixo da pasta Curso-

FrontEnd nesse momento. Vamos clicar no desenho do arquivo sinalizado

pelo número 5 e criaremos o nosso primeiro arquivo do curso.

/igor-rebolla
Estrutura de Pastas e Arquivos
dentro do Microsoft Visual
Studio Code
7º - Vamos nomear o primeiro arquivo do nosso curso, ao clicarmos no

desenho do arquivo logo abaixo da pasta Curso-FrontEnd o cursor ficará

piscando para ser digitado algo é aqui que daremos o nome de:

index.html e logo em seguida pressionaremos o enter 1x para gravar

esse nome.

/igor-rebolla
Estrutura de Pastas e Arquivos
dentro do Microsoft Visual
Studio Code

8º - Notem que ao clicarmos sobre o index.html localizado do lado

esquerdo da tela (logo abaixo da pasta Curso-FrontEnd) automaticamente

do lado direito da tela, surgiu o mesmo arquivo index.html. O lado direito

é o local onde vamos digitar todo o código que faz parte da estrutura

desse arquivo index.html (conforme passo 7)

/igor-rebolla
Sugestões de prática para essa
aula:

1. Instalar o Microsoft Visual Studio Code (seguir os passos que foram

mostrados);

2. Criar a pasta Curso-FrontEnd (Dentro do Explorador de Arquivos ou

Windows Explorer no Windows);

3. Criar o arquivo index.html (Dentro do Microsoft Visual Studio Code,

embaixo da pasta Curso-FrontEnd).

/igor-rebolla
 O que vamos aprender na
aula 02:
Na segunda e próxima aula, vamos entender como funciona linha por

linha da estrutura do arquivo (Index.html) que será em breve a estrutura

da nossa casa.. Afinal de contas, precisamos começar a preencher o

quadrado vermelho o qual foi referenciado na última imagem desta

primeira aula (vamos deixar a imagem aqui abaixo novamente para fixar

o entendimento)

Feedbacks dessa primeira aula são bem-vindos.

Nos vemos na segunda aula que será disponibilizada no dia 14/12/2021 às

8h30min (Horário de Brasília) - Dentro do meu perfil no Linkedin.

/igor-rebolla