FERRAMENTA DE DESENVOLVIMENTO

VS CODE
 Instalando VS_CODE
Baixar em https://code.visualstudio.com/download
Instalando VS_CODE
Instalando VS_CODE
Instalando VS_CODE
Instalando VS_CODE
Configurando VS_CODE
Criar uma pasta e abrir o VS CODE – Na pasta
VS CODE aberto na pasta exemplo DESENVOLVEDOR
Instalando extensões para auxiliar no desenvolvimento
Instalando extensões para auxiliar no desenvolvimento
Instalando extensões para auxiliar no desenvolvimento
Instalando extensões para auxiliar no desenvolvimento
Instalando extensões para auxiliar no desenvolvimento
Configurando AUTO SAVE no VS CODE
Configurando AUTO SAVE no VS CODE
Configurando FORMAT no VS CODE
Configurando FORMAT no VS CODE
Configurando FORMAT no VS CODE
Configurando FONTE no VS CODE
Configurando FONTE no VS CODE
Configurando FONTE no VS CODE
Criar uma pasta para trabalho – vscode_dev
Criar uma stilo dentro da pasta vscode_dev
Abrir o VS Code na pasta vs_code
Clicar na confiabilidade dos autores para abertura
Clicar na confiabilidade dos autores para abertura
Clicar CTRL + SHIFT + P para testar o LIVE SERVER
Copiar as figuras disponibilizadas para pasta
Copiar as figuras disponibilizadas para pasta
Criar uma pasta segundapagina dentro da pasta stilo
Criar um arquivo index.html na pasta VSCODE_DEV
Criar um arquivo style.css na pasta segundapagina
Criar um arquivo segundapagina.html dentro da
pasta segundapagina
Vamos carregar a estrutura do HTML
Vamos carregar a estrutura do HTML
Inserir o TITLE
Inserir um LINK
Inserir um LINK
Inserir um LINK
Inserir um LINK para navegar entre as pastas
Inserindo uma ancora para pasta segundapagina
Inserindo uma ancora reversa para index.html
Efetuar teste de funcionalidade
CTRL + SHIFT + P (LIVE SERVER)
Inserir link de acesso ao CSS
Definindo características CSS para teste
Definindo características CSS para teste
Vamos movimentar as figuras entre as pastas
Criar o link da FIG 3 da pasta imagem
 Testar funcionalidade
CTRL + SHIFT + P (LIVE SERVER)
Inserindo ajustes de pular linhas e novos textos
 Testar funcionalidade
CTRL + SHIFT + P (LIVE SERVER)
Inserindo ajustes
Inserindo ajustes
 Testar funcionalidade
CTRL + SHIFT + P (LIVE SERVER)